Adorrable坛子
2015-07-21 20:16
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Tanzi的七巧板</title> </head> <body> <canvas id ="canvas" style="border: solid 5px black; display:block; margin-top: 150px;margin-left:200px;"> 如果您看到这句话,证明您的浏览器不支持canvas </canvas> <script> var tangram=[ {p:[{x:0,y:0},{x:400,y:400},{x:800,y:0}],color:"red"}, {p:[{x:0,y:0},{x:0,y:800},{x:400,y:400}],color:"blue"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"yellow"}, {p:[{x:800,y:400},{x:400,y:800},{x:800,y:800}],color:"orange"}, {p:[{x:400,y:400},{x:600,y:600},{x:600,y:200}],color:"purple"}, {p:[{x:400,y:400},{x:200,y:600},{x:400,y:800},{x:600,y:600}],color:"green"}, {p:[{x:200,y:600},{x:0,y:800},{x:400,y:800}],color:"pink"} ] window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext('2d'); for(i=0;i<tangram.length;i++) draw(tangram[i],context); } function draw(piece,cxt){ cxt.beginPath(); cxt.moveTo(piece.p[0].x,piece.p[0].y); for(var i =1;i<piece.p.length;i++) cxt.lineTo(piece.p[i].x,piece.p[i].y); cxt.closePath(); cxt.fillStyle=piece.color; cxt.fill(); } </script> </body> </html>
非常不错!已经很好了
炫丽的倒计时效果Canvas绘图与动画基础
96746 学习 · 1000 问题
相似问题