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

怎么跟七巧板不是一樣的？http://www.xianlaiwan.cn/video/2435

<!DOCTYPE?html>
<html>
	<head>
		<meta?charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas?id="canvas"?style="border:?1px?solid?gray;margin:?50px?auto;display:?block;">
			當前瀏覽器不支持Canvas，請更換瀏覽器再試
		</canvas>
		
		<script>
			window.onload=function(){
				????var?sev=[
????????{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:"#67beef"},
????????{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},{x:600,y:200}],color:"#f6ca29"}
????]
				
				var?canvas=document.getElementById("canvas");
				canvas.width=1600;
				canvas.height=1600;
				if(canvas.getContext("2d")){
					var?context=canvas.getContext("2d");
					for(var?i=0;i<sev.length;i++){
						draw(sev[i],context);
					}
					//MyCanvas(context);
				//使用context繪制
				}else{
					alert("當前瀏覽器不支持")
				}
			}
			
			function?draw(sev,context){
				context.beginPath();
				context.moveTo(sev.p[0].x,sev.p[0].y);
				for(var?i=1;i<sev.p.length;i++){
					context.lineTo(sev.p[i].x,sev.p[i].y);
				}
				context.closePath();
				
				context.fillStyle=sev.color;
				context.fill();
				
				context.lineWidth=2;
				context.strokeStyle="black";
				context.stroke();
			}
		</script>
	</body>
</html>