本文主要是介绍HTML5---canvas绘制七巧板，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>七巧板</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 0 auto;"></canvas><script type="text/javascript">
//该数组表示七巧板的七块var tangram=[{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"yellow"}, {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"pink"}, {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"purple"}, {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"blue"}, {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"red"}, {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"green"}, {p:[{x:400,y:800},{x:800,y:400},{x:800,y:800}],color:"lightblue"} ]; function draw(piece,cxt){//piece表示每一个区域；cxt：contextcxt.beginPath();//开始绘制一个路径 cxt.moveTo(piece.p[0].x,piece.p[0].y);//移到要绘制的图形的第一个坐标处 for(var i=1;i<piece.p.length;i++)//piece.p.length为3；//依次绘制到后续坐标 cxt.lineTo(piece.p[i].x,piece.p[i].y);cxt.fillStyle=piece.color;cxt.closePath();//结束一个路径的绘制 cxt.fill();//设置每个七巧板的外边框cxt.strokeStyle="black";cxt.lineWidth=3;cxt.stroke();}window.οnlοad=function(){var canvas=document.getElementById("canvas");canvas.width=800;canvas.height=800;var context=canvas.getContext("2d");for(var i=0;i<tangram.length;i++){//tangram.length为7draw(tangram[i],context)//draw:绘制函数}
};
</script> </body>
</html>
这篇关于HTML5---canvas绘制七巧板的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
