參考書目：《HTML5 Canvas核心技術(shù) 圖形、動畫與游戲開發(fā)》
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');
? ? /*** 畫網(wǎng)格*/
? ? 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);
? ? ? ? /*** 畫網(wǎng)格的格子顏色和大小*/
? ? ? ? drawGird('lightgray',10,10);
? ? ? ? context.save();
? ? ? ? /*** 畫網(wǎng)格的格子顏色和大小*/
? ? ? ? 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順時(shí)針
? ? ? ? addCirclePath();//CCW,CCW代表counter-clockwise逆時(shí)針
? ? ? ? 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方法，增加了順序和逆序路徑的參數(shù)* @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); //三角形，左頂點(diǎn)
? ? ? ? context.lineTo(300, 115);//右頂點(diǎn)
? ? ? ? context.lineTo(120, 180);//底部的點(diǎn)
? ? ? ? context.closePath();
? ? }
? ? context.fillStyle='goldenrod';
? ? draw();
</script>
</html>
效果如圖：
