摘要：萬圣節(jié)到了，寫一個(gè)小例子了解一下畫圖方法，可以實(shí)現(xiàn)一些有趣的效果，動(dòng)畫實(shí)現(xiàn)。移動(dòng)路徑方法把路徑移動(dòng)到畫布中指定點(diǎn)，不創(chuàng)建線條。實(shí)現(xiàn)初始畫布顯示文字萬圣節(jié)快樂閃電打雷反轉(zhuǎn)畫布重置畫布總結(jié)萬圣節(jié)快樂

萬圣節(jié)到了，寫一個(gè)小例子了解一下canvas畫圖方法，canvas可以實(shí)現(xiàn)一些有趣的效果，動(dòng)畫實(shí)現(xiàn)。以一個(gè)簡單的頁面實(shí)現(xiàn)了解一下基礎(chǔ)的畫圖方法。
原文鏈接

canvas可以實(shí)現(xiàn)一些有趣的效果，動(dòng)畫實(shí)現(xiàn)。以一個(gè)簡單的頁面實(shí)現(xiàn)了解一下基礎(chǔ)的畫圖方法。

萬圣節(jié)快樂 ^_^

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

## 開始路徑

context.beginPath();

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

context.moveTo();

moveTo()方法把路徑移動(dòng)到畫布中指定點(diǎn)，不創(chuàng)建線條。

context.lineTo();

lineTo()方法添加一個(gè)新點(diǎn)，在畫布中創(chuàng)建該點(diǎn)到指定點(diǎn)的線條。

context.drawImage(image,x,y);

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

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

getImageData()方法可以獲取畫布imageData對象，該對象指定了矩形的像素?cái)?shù)據(jù)。

在imageData對象中每個(gè)像素都存在rgba值，以數(shù)組形式存儲(chǔ)在data屬性中。

context.putImageData(imageData,x,y);

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

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("萬圣節(jié)快樂", 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);
        }

        //反轉(zhuǎn)畫布
        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();
    }

})();

# 總結(jié)

萬圣節(jié)快樂?