用H5的canvas做恐怖动画

canvas可以实现一些有趣的效果，动画实现。以一个简单的页面实现了解一下基础的画图方法。

效果

万圣节快乐

预备知识

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

开始路径

context.beginPath();
    

beginPath()方法在画布上开始一条绘制路径，或重置当前的路径。

移动路径

context.moveTo();
    

moveTo()方法把路径移动到画布中指定点，不创建线条。

添加线条

context.lineto();
    

lineTo()方法添加一个新点，在画布中创建该点到指定点的线条。

画图drawImage

context.drawImage(image,x,y);
    

drawImage()方法可以在画布上绘制图像、画布或视频，也可以绘制图像的某些部分，增加／减少图像的尺寸。

获取像素数据

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

getImageData()方法可以获取画布imageData对象，该对象指定了矩形的像素数据。

在imageData对象中每个像素都存在rgba值，以数组形式存储在data属性中。

放回像素数据

context.putImageData(imageData,x,y);
    

putImageData()方法将获取的图像数据放回到画布上。

实现

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('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();
    }
}
    )();
    

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

前端开发中的SVG动画

canvas怎样做出黑色背景带特效碎屑烟花

以上就是用H5的canvas做恐怖动画的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！