html5 相同形状的图形进行循环

现在在学习canvas，是html5中扮演者一个非常重要的角色，可以画出很多奇异的，带有diy的图形。。。。

这里，我设计了几个：

这次，我将界面弄的比较花哨，因为我在同一个画布上面画了很多个形状！

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">



	</style>
	<script type="text/javascript">
	var color = new Array("red", "grey", "blue", "yellow", "orange", "green", "purple", "black", "white", "#0f0");
	window.onload = function () { 得到画布
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");

	开始画
	context.beginPath();
	context.lineWidth = 40;
	context.strokeStyle = "#f00";
	context.moveTo(40, 40);
	context.lineTo(160, 160);
	context.stroke(); 结束画
	context.closePath();


	context.beginPath();
	context.lineWidth = 40;
	context.strokeStyle = "#00f";
	context.moveTo(160, 40);
	context.lineTo(40, 160);
	context.stroke();
	context.closePath();

	在这里我们应用到渐变
	var fillcolordiagonal = context.createLinearGradient(60, 400, 500, 40);
	fillcolordiagonal.addColorStop(0, "blue");
	fillcolordiagonal.addColorStop(0.1, "black");
	fillcolordiagonal.addColorStop(0.2, "darkslategrey");
	fillcolordiagonal.addColorStop(0.3, "black");
	fillcolordiagonal.addColorStop(0.4, "darkslategrey");
	fillcolordiagonal.addColorStop(0.5, "black");
	fillcolordiagonal.addColorStop(0.6, "darkslategrey");
	fillcolordiagonal.addColorStop(0.7, "red");
	fillcolordiagonal.addColorStop(0.8, "darkslategrey");
	fillcolordiagonal.addColorStop(0.9, "black");

	context.fillStyle = fillcolordiagonal;


	context.fillRect(0, 590, 1300, 20);
	context.stroke();
	var fillcolortext = context.createLinearGradient(100, 100, 100, 50);
	fillcolortext.addColorStop(0.2, "blue");
	fillcolortext.addColorStop(0.4, "purple");
	fillcolortext.addColorStop(0.6, "green");
	fillcolortext.addColorStop(0.8, "red");
	context.beginPath();
	context.fillStyle = fillcolortext;
	context.font = "30px verdana red";
	context.textBaseline = "top";
	// context.fontcolor("red");
	context.fillText("Welcome to HTML5", 10, 200);

	context.fill();
	// context.stroke();

	var fillcolortext = context.createLinearGradient(100, 100, 100, 50);
	fillcolortext.addColorStop(0.2, "red");
	fillcolortext.addColorStop(0.4, "purple");
	fillcolortext.addColorStop(0.6, "green");
	fillcolortext.addColorStop(0.8, "red");
	context.beginPath();
	context.fillStyle = fillcolortext;
	context.font = "30px verdana";
	context.textBaseline = "top";
	// context.fontcolor("red");
	context.fillText("welcome to my World", 10, 230);

	context.fill();
	// context.stroke();

	var fillcolortext = context.createLinearGradient(100, 100, 100, 50);
	fillcolortext.addColorStop(0.2, "blue");
	fillcolortext.addColorStop(0.4, "purple");
	fillcolortext.addColorStop(0.6, "green");
	fillcolortext.addColorStop(0.8, "red");
	context.beginPath();
	context.fillStyle = fillcolortext;
	context.font = "35px verdana red";
	context.textBaseline = "top";
	// context.fontcolor("red");
	context.fillText("In fact,i don't know html5,but i like it yet!", 100, 610);
	context.fill();
	context.stroke();


	context.beginPath();
	var fillcolorradial = context.createRadialGradient(1050, 150, 0, 1050, 150, 200);
	fillcolorradial.addColorStop(0, "darkslategrey");

	fillcolorradial.addColorStop(0.2, "black");
	fillcolorradial.addColorStop(0.4, "darkslategrey");

	fillcolorradial.addColorStop(0.6, "black");


	fillcolorradial.addColorStop(0.8, "darkslategrey");
	fillcolorradial.addColorStop(0.9, "black");
	context.fillStyle = fillcolorradial;
	// context.rect(1050,150,150,150);
	context.arc(1050, 150, 150, 0, Math.PI * 2, true);
	context.fill();
	//context.stroke();

	for (var i = 0; i < 105; i++) { 得到随机数，这样就可以随机颜色与位置了
	var srandX = parseInt(Math.random() * 10000 % 1300);
	var srandY = parseInt(Math.random() * 1000 % 600);
	var srandColor = parseInt(Math.random() * 10);
	context.beginPath();
	context.fillStyle = color[srandColor];

	// context.arc(30+100i,560,15,0,Math.PI2,true);
	context.arc(srandX, srandY, 15, 0, Math.PI * 2, true);
	context.fill();
	context.closePath();
	}

	for (var i = 0; i < 7; i++) { 在这里我们开始画最大的那7个围绕着一个中心旋转的矩形
	var srandColor = parseInt(Math.random() * 10);
	context.beginPath(); 得到一个新的原点
	context.translate(570, 250); 旋转的角度
	context.rotate(40 * Math.PI / 180); 返回到原点
	context.translate(-570, -250);

	context.strokeStyle = color[srandColor]; 设置矩形的位置与大小
	context.strokeRect(360, 200, 420, 100);
	context.stroke();
	} 上面的旋转类似
	for (var i = 0; i < 6; i++) {
	var srandColor = parseInt(Math.random() * 10);
	context.beginPath();
	context.translate(820, 750);
	context.rotate(30 * Math.PI / 180);
	context.translate(-820, -750);

	context.strokeStyle = color[srandColor];
	context.strokeRect(790, 730, 60, 40);
	context.stroke();
	} 同上
	for (var i = 0; i < 6; i++) {
	var srandColor = parseInt(Math.random() * 10);
	context.beginPath();
	context.translate(1200, 720);
	context.rotate(30 * Math.PI / 180);
	context.translate(-1200, -720);

	context.strokeStyle = color[srandColor];
	context.strokeRect(1300, 800, 100, 70);
	// context.stroke();
	}
	}

	</script>
	</head>
	<body>
	<canvas width="1300" height="800" id="myCanvas" style="background-color: darkslategrey"></canvas>

	</body>
	</html>

posted @ 2013-11-21 00:41 Catherine_Brain 阅读(651) 评论(0) 收藏举报

刷新页面返回顶部

Personal Site Name

yourname personal portfolio

Some words about me

What I do?

Contact me?

Catherine_Brain

Stay hungry,stay foolish!

html5 相同形状的图形进行循环

公告