                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

七巧板怎么不给源码呢

七巧板怎么不给源码呢？这个例子非常好啊！

狂奔的蚂蚁

2015-04-11

源自：炫丽的倒计时效果Canvas绘图与动画基础 2-2

关注问题我要回答

1255

操作

收起

1 回答

xiaoyaing
2015-12-21

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>七巧板</title>
		<style>
			
		</style>
	</head>
	<body>			
			<canvas id="canvas"  style="display:block;border:1px solid #aaa;margin:50px auto;">
				当前浏览器不支持canvas，请更换浏览器后再试！
			</canvas>
			<script type="text/javascript">
				var site=[
				{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#e67817"},
				{p:[{x:0,y:0},{x:400,y:0},{x:200,y:200}],color:"#f09ba0"},
				{p:[{x:400,y:0},{x:600,y:200},{x:400,y:400},{x:200,y:200}],color:"#fff500"},
				{p:[{x:400,y:0},{x:800,y:0},{x:800,y:400}],color:"#d22d2b"},
				{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#76c5f0"},
				{p:[{x:600,y:200},{x:800,y:400},{x:800,y:800},{x:600,y:600}],color:"#6600a1"},
				{p:[{x:400,y:400},{x:800,y:800},{x:0,y:800}],color:"#00923f"}
				];
				
				window.onload=function(){					
					var canvas=document.getElementById('canvas');
					canvas.width=800;
					canvas.height=800;
					var context=canvas.getContext('2d');
					for(var i=0;i<site.length;i++){				
						draw(site[i],context);	
					}					
					
					function draw(sitt,ctx){				
						ctx.beginPath();
						ctx.moveTo(sitt.p[0].x,sitt.p[0].y);
						for(var i=1;i<sitt.p.length;i++){	
							ctx.lineTo(sitt.p[i].x,sitt.p[i].y);	
						}
						ctx.closePath();	
						ctx.fillStyle=sitt.color;
						ctx.fill();					
						//ctx.strokeStyle="black";
						//ctx.stroke();						
					}																			
				}	
			</script>
	</body>
</html>