如何使用HTML5中的canvas做恐怖動(dòng)畫

這篇文章主要介紹了如何使用HTML5中的canvas做恐怖動(dòng)畫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

效果

萬(wàn)圣節(jié)快樂

預(yù)備知識(shí)

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

開始路徑

context.beginPath();

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

移動(dòng)路徑

context.moveTo();

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

添加線條

context.lineTo();

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

畫圖drawImage

context.drawImage(image,x,y);

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

獲取像素?cái)?shù)據(jù)

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

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

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

放回像素?cái)?shù)據(jù)

context.putImageData(imageData,x,y);

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

實(shí)現(xiàn)

html

<canvas id="canvas"></canvas><button id="click" class="switch">Click</button>

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('萬(wàn)圣節(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();
    }
})();

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用HTML5中的canvas做恐怖動(dòng)畫”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!