Use H5 canvas to make horror animations

This time I will bring you the use of H5 canvas to make horror animations. What are the precautions for using H5 canvas to make horror animations? The following is a practical case, let’s take a look.

Canvas can achieve some interesting effects and animations. Learn about basic drawing methods with a simple page implementation.

Effect

Happy Halloween

Preliminary knowledge

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

Start path

context.beginPath();

beginPath() method starts a drawing path on the canvas , or reset the current path.

Move path

context.moveTo();

The moveTo() method moves the path to the specified point in the canvas without creating a line.

Add line

context.lineTo();

The lineTo() method adds a new point and creates a line from the point to the specified point in the canvas.

drawImage

context.drawImage(image,x,y);

The drawImage() method can draw an image, canvas or video on the canvas. It can also draw certain parts of the image and increase/decrease the size of the image.

Get pixel data

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

The getImageData() method can obtain the canvas imageData object, which specifies the pixel data of the rectangle.

There is an rgba value for each pixel in the imageData object, which is stored in the data attribute in the form of an array.

Put back the pixel data

context.putImageData(imageData,x,y);

The putImageData() method puts the acquired image data back on the canvas.

Implementation

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('万圣节快乐', 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(&#39;canvas&#39;);    let canvas = document.getElementById(&#39;canvas&#39;);    let ctx = canvas.getContext(&#39;2d&#39;);    let img = new Image();
    img.src = &#39;/images/halloween.png&#39;;
    img.onload = () => {
        halloween.initDraw(img);
    }    document.getElementById(&#39;click&#39;).onclick = () => {
        halloween.thunder();
    }
})();

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website

Other related articles!

Recommended reading:

SVG animation in front-end development

How to make black background with special effects debris fireworks on canvas

The above is the detailed content of Use H5 canvas to make horror animations. For more information, please follow other related articles on the PHP Chinese website!