python七巧板绘图_记录一次canvas绘图（七巧板）

效果图如上

代码如下：

canvas

.canvas_box{

border:1px solid #ddd;

display: block;

margin: 0 auto;

}

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:'#ef3d1'},

{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9fa1a'},

{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');

canvas.width = 800;

canvas.height = 800;

var context = canvas.getContext('2d');

for(var i= 0;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

cxt.lineTo(piece.p[i].x,piece.p[i].y);

}

cxt.closePath();

cxt.fillStyle = piece.color;

cxt.fill();

cxt.strokeStyle = '#000';

cxt.lineWidth = 3;

cxt.stroke();

}