用canvas绘制的七巧板颜色填充不上是什么原因？

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="800" height="800" style="border:1px solid #aaa;display:block;margin:50px auto;">当浏览器不支持canvas，请更换浏览器后再试 </canvas> <script> //每块板子的颜色坐标 var data=[ {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:"#67becf"}, {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}],color:"#f6ca29"} ] //canvas函数 window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); //使用context绘制 //循环遍历，每次遍历调用draw函数 for(var i = 0; i < data.length ; i++) draw(data[i],context);//包括了两个参数，第一个是每块七巧板的一块，第二个是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的例子可以给你参考下。

用canvas绘制的七巧板颜色填充不上是什么原因？

2回答