Use H5 canvas to make horror animations-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Use H5 canvas to make horror animations

php中世界最好的语言

Mar 13, 2018 pm 04:33 PM

canvas html5

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(&#39;canvas&#39;);let context = canvas.getContext(&#39;2d&#39;);

Copy after login

Start path

context.beginPath();

Copy after login

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

Move path

context.moveTo();

Copy after login

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

Add line

context.lineTo();

Copy after login

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);

Copy after login

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);

Copy after login

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);

Copy after login

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>

Copy after login

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;
    }
}

Copy after login

(function () {    class Halloween {        constructor(id) {            this.canvas = document.getElementById(id);            this.ctx = this.canvas.getContext(&#39;2d&#39;);            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 = &#39;60px Verdana&#39;;            this.ctx.fillStyle = &#39;#ffffff&#39;;            this.ctx.fillText(&#39;万圣节快乐&#39;, 350, 280);
        }        //闪电
        lightning() {            let ctx = this.ctx;
            ctx.strokeStyle = &#39;#fff&#39;;
            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();
    }
})();

Copy after login

Use H5 canvas to make horror animations

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