canvas绘制七巧板

最新推荐文章于 2021-07-03 15:08:08 发布

仰望星空的包子

最新推荐文章于 2021-07-03 15:08:08 发布

阅读量1.4k

点赞数

分类专栏： html5 文章标签： html5 canvas 绘制七巧板

本文链接：https://blog.csdn.net/sinat_21206105/article/details/54601343

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天来学下canvas，难度：1星；题目：canvas绘制七巧板

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>七巧板绘制</title>
</head>
<body>
	<canvas id="canvas" style="border:1px solid #eee;display: block;margin:50px auto;"> 
		
	</canvas>
	<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:"#a594c0"},
			{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
			{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"},
		];
		window.οnlοad=function(){
			var canvas=document.getElementById("canvas");
			canvas.width=800;
			canvas.height=800;
		    var context=canvas.getContext("2d");
		    for(var i=0;i<tangram.length;i++)
		    	draw(tangram[i],context);
		    
		    
		}
		    // 画直线
		  function draw(ps,ctx){
		  		ctx.beginPath();
		  		ctx.moveTo(ps.p[0].x,ps.p[0].y);
		  		for(var i=0;i<ps.p.length;i++)
		  			ctx.lineTo(ps.p[i].x,ps.p[i].y);

		  			ctx.closePath();
		  			ctx.fillStyle=ps.color;
		  			ctx.fill();
		  		
		  }
		    
		
	</script>
</body>
</html>

canvas绘制七巧板