<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>七巧板绘制</title>
</head>
<body>
<!– canvas默认边框是宽300和高150,因为canvas是一张画布，也要设置一个分辨率，标准写法就是这样写 –>
<canvas id=”canvas” style=”border:1px solid black”>
</canvas>
<script >
var canvas=document.getElementById(‘canvas’);
// 设置画布的宽和高
canvas.width=800;
canvas.height=800;
var context=canvas.getContext(‘2d’);
// 获取环境的上下文，获取对象来绘制图像，2d和3d是固定
// context.beginPath();//开始新的起点
// context.moveTo(0,0);//设置起始点位置
// context.lineTo(400,400);//下一个点的位置
// context.lineTo(0,800);
// context.closePath();//将线性封装
// context.fillStyle=”#CCFF80″;
// context.fill();
// context.stroke();//绘制线条，在绘制之前，都要设置绘制状态
// context.beginPath();//开始新的起点
// context.moveTo(0,0);//设置起始点位置
// context.lineTo(400,400);//下一个点的位置
// context.lineTo(800,0);
// context.closePath();//将线性封装
// context.fillStyle=”#66D4BF”;
// context.fill();
// context.stroke();//绘制线条，在绘制之前，都要设置绘制状态
// context.beginPath();//开始新的起点
// context.moveTo(400,400);//设置起始点位置
// context.lineTo(200,600);//下一个点的位置
// context.lineTo(400,800);
// context.lineTo(600,600);
// context.closePath();//将线性封装
// context.fillStyle=”#FF4180″;
// context.fill();
// context.stroke();//绘制线条，在绘制之前，都要设置绘制状态
// context.beginPath();//开始新的起点
// context.moveTo(200,600);//设置起始点位置
// context.lineTo(0,800);//下一个点的位置
// context.lineTo(400,800);
// context.closePath();//将线性封装
// context.fillStyle=”#66D4BF”;
// context.fill();
// context.stroke();//绘制线条，在绘制之前，都要设置绘制状态
// context.beginPath();//开始新的起点
// context.moveTo(400,800);//设置起始点位置
// context.lineTo(800,800);//下一个点的位置
// context.lineTo(800,400);
// context.closePath();//将线性封装
// context.fillStyle=”#FFD440″;
// context.fill();
// context.stroke();//绘制线条，在绘制之前，都要设置绘制状态
// context.beginPath();//开始新的起点
// context.moveTo(600,600);//设置起始点位置
// context.lineTo(600,200);//下一个点的位置
// context.lineTo(400,400);
// context.closePath();//将线性封装
// context.fillStyle=”#FFFF00″;
// context.fill();
// context.stroke();//绘制线条，在绘制之前，都要设置绘制状态
// context.beginPath();//开始新的起点
// context.moveTo(600,200);//设置起始点位置
// context.lineTo(800,0);//下一个点的位置
// context.lineTo(800,400);
// context.lineTo(600,600);
// context.closePath();//将线性封装
// context.fillStyle=”#9990BF”;
// context.fill();
// context.stroke();//绘制线条，在绘制之前，都要设置绘制状态
// 第二种方法写七巧板
var s=[
[{x:0,y:0},{x:800,y:0},{x:400,y:400},{color:”#CCFF80″}],
[{x:0,y:0},{x:400,y:400},{x:0,y:800},{color:”#66D4BF”}],
[{x:400,y:400},{x:200,y:600},{x:400,y:800},{x:600,y:600},{color:”#FF4180″}],
[{x:200,y:600},{x:400,y:800},{x:0,y:800},{color:”#66D4BF”}],
[{x:800,y:400},{x:800,y:800},{x:400,y:800},{color:”#FFD440″}],
[{x:800,y:400},{x:800,y:0},{x:600,y:200},{x:600,y:600},{color:”#9990BF”}],
[{x:400,y:400},{x:600,y:200},{x:600,y:600},{color:”#FFFF00″}]
]
function draw(s){
for (var i = 0; i < s.length; i++) {
context.beginPath();
for (var j = 0; j < s[i].length; j++) {
context.lineTo(s[i][j].x,s[i][j].y);
context.fillStyle=s[i][j].color;
}
context.fill();
context.stroke();
}
}
draw(s);
</script>
</body>
</html>