                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎

七巧板怎么不給源碼呢

七巧板怎么不給源碼呢？這個例子非常好??！

狂奔的螞蟻

2015-04-11

源自：炫麗的倒計時效果Canvas繪圖與動畫基礎 2-2

關注問題我要回答

1389

操作

收起

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>