为什么显示不出七巧板

你这个里面代码都不全啊。给你看我写的。<!DOCTYPE html> <html> <head> <title>七巧板</title> </head> <body> <canvas id="canvas" width="800" height="800" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas> <script type="text/javascript"> var tangram = [ {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"} ]; window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); /*context.beginPath(); //开始新区域 context.moveTo(100,100);//设置起点 context.lineTo(700,700);//设置下一个点 context.lineTo(100,700); context.lineTo(100,100); context.fillStyle = "#ff0";//设置填充色 context.fill(); //填充 context.lineWidth = 5;//设置线宽 context.strokeStyle = "red";//设置线颜色 context.stroke(); //画边框 context.closePath(); //关闭区域 context.beginPath(); context.moveTo(200,100); context.lineTo(700,600); context.strokeStyle = "black"; context.stroke(); context.closePath();*/ for(var i=0;i<tangram.length;i++){ dram(tangram[i],context); } } function dram(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>

为什么显示不出七巧板

1回答