七巧板实例

最新推荐文章于 2024-10-31 15:56:11 发布

diaoyucan2509

最新推荐文章于 2024-10-31 15:56:11 发布

阅读量170

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zimuzimu/p/5678074.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var tangram=[
                        {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
                        {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
                        {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
                        {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
                        {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a54c09"},
                        {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"},
                        {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
                        ]
				
			window.οnlοad=function(){
				var c=document.getElementById('cvs');              //获取画板
				cxt=c.getContext('2d');                            //设置context
				for(var i=0;i<tangram.length;i++){                 //循环获取数组中的对象
					draw(tangram[i],cxt);                      //调用draw函数绘制
				}
		
				function draw(piece,cxt){
					cxt.beginPath();                           //开始绘制路径
					cxt.moveTo(piece.p[0].x,piece.p[0].y);     //起点
					for(var i=1;i<piece.p.length;i++){          
						cxt.lineTo(piece.p[i].x,piece.p[i].y); //依次获取个点的坐标位置，划线
					}
					cxt.closePath();                           //完成绘制
                                        cxt.strokeStyle="#333";                    //绘制线条颜色
                                        cxt.stroke();                              //绘制线条
                                        cxt.fillStyle=piece.color;                 //获取颜色，设置填充颜色
                                        cxt.fill();	                               //填充
				}
		    }
		</script>
	</head>
	<body>
		<div style="margin: 0 auto; width: 800px; height: 800px;">
			<canvas id="cvs" width="800" height="800" style="border: 1px solid #e8e8e8;"></canvas>
		</div>
	</body>
</html>

转载于:https://www.cnblogs.com/zimuzimu/p/5678074.html