canvas七巧板案例源码
<canvas id="mycanvas"></canvas>
<script type="text/javascript">
(function(id){
var tangram=[
{p:[{x:520,y:40},{x:520,y:170},{x:595,y:110}],color:"#FDAD05"},
{p:[{x:595,y:110},{x:670,y:46},{x:670,y:170}],color:"#FC7861"},
{p:[{x:670,y:170},{x:595,y:110},{x:520,y:170},{x:595,y:246}],color:"#F2DE0C"},
{p:[{x:595,y:246},{x:432,y:390},{x:602,y:555}],color:"#CA9964"},
{p:[{x:595,y:246},{x:712,y:350},{x:600,y:465}],color:"#6CA4A7"},
{p:[{x:432,y:390},{x:430,y:620},{x:670,y:620}],color:"#F54C42"},
{p:[{x:175,y:528},{x:341,y:535},{x:430,y:620},{x:250,y:610}],color:"#9ECF00"}
]
var canvas=document.getElementById(id);
canvas.width=1090;
canvas.height=880;
var context=canvas.getContext('2d');
for(var i=0;i<tangram.length;i++)
{
context.beginPath();
context.moveTo(tangram[i].p[0].x,tangram[i].p[0].y);
for(var j=1;j<tangram[i].p.length;j++){
context.lineTo(tangram[i].p[j].x,tangram[i].p[j].y);
}
context.closePath();
context.fillStyle=tangram[i].color;
context.strokeStyle=tangram[i].color;
context.fill();
context.stroke();
}
})('mycanvas')
</script>看到很多同学要源码 自己写的一个 七巧板 希望大家做参考 多动手练习
