这篇文章主要介绍了如何使用HTML5中的canvas做恐怖动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联是少有的
成都做网站、成都网站设计、营销型企业网站、成都微信小程序、手机APP,开发、制作、设计、
友情链接、推广优化一站式服务网络公司,于2013年开始,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评
效果
万圣节快乐
预备知识
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
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('万圣节快乐', 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();
}
})();
感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用HTML5中的canvas做恐怖动画”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站制作公司行业资讯频道，更多相关知识等着你来学习!
当前标题：如何使用HTML5中的canvas做恐怖动画-创新互联
本文地址：
http://bjjierui.cn/article/djdjds.html
