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

怎么跟七巧板不是一样的？http://www.imooc.com/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>