摘要：萬圣節到了，寫一個小例子了解一下畫圖方法，可以實現一些有趣的效果，動畫實現。移動路徑方法把路徑移動到畫布中指定點，不創建線條。實現初始畫布顯示文字萬圣節快樂閃電打雷反轉畫布重置畫布總結萬圣節快樂

萬圣節到了，寫一個小例子了解一下canvas畫圖方法，canvas可以實現一些有趣的效果，動畫實現。以一個簡單的頁面實現了解一下基礎的畫圖方法。
原文鏈接

canvas可以實現一些有趣的效果，動畫實現。以一個簡單的頁面實現了解一下基礎的畫圖方法。

萬圣節快樂 ^_^

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");

## 開始路徑

context.beginPath();

beginPath()方法在畫布上開始一條繪制路徑，或重置當前的路徑。

context.moveTo();

moveTo()方法把路徑移動到畫布中指定點，不創建線條。

context.lineTo();

lineTo()方法添加一個新點，在畫布中創建該點到指定點的線條。

context.drawImage(image,x,y);

drawImage()方法可以在畫布上繪制圖像、畫布或視頻，也可以繪制圖像的某些部分，增加／減少圖像的尺寸。

context.getImageData(x,y,width,height);

getImageData()方法可以獲取畫布imageData對象，該對象指定了矩形的像素數據。

在imageData對象中每個像素都存在rgba值，以數組形式存儲在data屬性中。

context.putImageData(imageData,x,y);

putImageData()方法將獲取的圖像數據放回到畫布上。

Click

## css

html,
body,
canvas {
    width: 100%;
    height: 100%;
    margin: 0;
}

.switch {
    position: absolute;
    top: 70%;
    right: 10%;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    outline: none;
    cursor: pointer;
    animation: switch-animate alternate infinite ease 1s 0s;
}

@keyframes switch-animate {
    from {
        box-shadow: 0 0 30px #ece9c5;
    }

    to {
        box-shadow: 0 0 100px #eae5a7;
    }
}    

## js

(function () {

    class Halloween {
        constructor(id) {
            this.canvas = document.getElementById(id);
            this.ctx = this.canvas.getContext("2d");
            this.w = this.canvas.width;
            this.h = this.canvas.height;
            this.data = [];
        }

        //初始畫布
        initDraw(img) {
            this.w = this.canvas.width = img.width;
            this.h = this.canvas.height = img.height;
            this.ctx.drawImage(img, 0, 0);
            this.data = this.ctx.getImageData(0, 0, this.w, this.h);
        }

        //顯示文字
        drawText() {
            this.ctx.font = "60px Verdana";
            this.ctx.fillStyle = "#ffffff";
            this.ctx.fillText("萬圣節快樂", 350, 280);
        }

        //閃電
        lightning() {
            let ctx = this.ctx;
            ctx.strokeStyle = "#fff";
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(800, 10);
            ctx.lineTo(600, 100);
            ctx.lineTo(500, 200);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(600, 100);
            ctx.lineTo(650, 170);
            ctx.stroke()
        }

        //打雷
        thunder() {
            let timer = Math.floor(800 * Math.random());
            this.reverse();
            this.lightning();
            this.drawText();
            setTimeout(() => {
                this.reset();
            }, timer);
        }

        //反轉畫布
        reverse() {
            let imgData = this.ctx.getImageData(0, 0, this.w, this.h);
            for (var i = 0, len = imgData.data.length; i < len; i += 4) {
                imgData.data[i] = 255 - imgData.data[i];
                imgData.data[i + 1] = 255 - imgData.data[i + 1];
                imgData.data[i + 2] = 255 - imgData.data[i + 2];
                imgData.data[i + 3] = 255;
            }
            this.ctx.putImageData(imgData, 0, 0);
        }

        //重置畫布
        reset() {
            this.ctx.putImageData(this.data, 0, 0);
        }
    }

    let halloween = new Halloween("canvas");
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    let img = new Image();
    img.src = "/images/halloween.png";
    img.onload = () => {
        halloween.initDraw(img);
    }

    document.getElementById("click").onclick = () => {
        halloween.thunder();
    }

})();

# 總結

萬圣節快樂?