参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》
HTML5 Canvas绘图剪纸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制剪纸图形</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas'),
context= canvas.getContext('2d');
/*** 画网格*/
function drawGird(color,stepX,stepY) {
context.strokeStyle = color;
context.lineWidth = 0.5;
for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}
for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}
}
function draw() {
context.clearRect(0,0,canvas.width,canvas.height);
/*** 画网格的格子颜色和大小*/
drawGird('lightgray',10,10);
context.save();
/*** 画网格的格子颜色和大小*/
context.shadowColor='rgba(200,200,0,0.5)';
context.shadowOffsetX=12;
context.shadowOffsetY=12;
context.shadowBlur=15;
drawCutouts();
strokeCutoutShapes();
context.restore();
}
/*** 画那些需要镂空的图形*/
function drawCutouts() {
context.beginPath();
addOuterRectanglePath();//CW，CW代表Clockwise顺时针
addCirclePath();//CCW,CCW代表counter-clockwise逆时针
addRectanglePath();//CCW
addTrianglePath();//CCW
context.fill();//Cut out shapes
}
/*** 镂空描边*/
function strokeCutoutShapes() {
context.save();
context.strokeStyle='rgba(0,0,0,0.7)';
context.beginPath();
addOuterRectanglePath();//CW
context.stroke();
context.beginPath();
addCirclePath1();
addRectanglePath();
addTrianglePath();
context.stroke();
}
/*** 重写rect方法，增加了顺序和逆序路径的参数* @param x* @param y * @param w* @param h * @param direction 顺序和逆序,布尔类型 */
function rect(x,y,w,h,direction) {
if(direction){//CCW
context.moveTo(x,y);
context.lineTo(x,y+h);
context.lineTo(x+w,y+h);
context.lineTo(x+w,y);
context.closePath();
}else{
context.moveTo(x,y);
context.lineTo(x + w, y);
context.lineTo(x + w, y + h);
context.lineTo(x, y + h);
context.closePath();
}
}
function addOuterRectanglePath() {
/*** 画背景*/
context.rect(110, 25, 370, 335);
}
function addCirclePath() {
/*** 画圆*/
context.arc(200,80,40,0,Math.PI*2,true);
}
function addRectanglePath() {
/*** 画矩形*/
rect(150,180,300,100,true);
rect(200,180,50,50,true);
rect(360,180,50,50,true);
rect(280,200,50,80,true);
}
function addTrianglePath() {
/*** 画三角形*/
context.moveTo(480,180); //三角形，左顶点
context.lineTo(300, 115);//右顶点
context.lineTo(120, 180);//底部的点
context.closePath();
}
context.fillStyle='goldenrod';
draw();
</script>
</html>
效果如图：
