当前第2页 返回上一页
粒子绘制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function getPixels(){
var pos=0;
var data=imageData.data;
for(var i=1;i<=image.width;i++){
for(var j=1;j<=image.height;j++){
pos=[(i-1)*image.width+(j-1)]*4;
if(data[pos]>=0){
var pixel={
x:(canvas.width-image.width)/2+j+Math.random()*20,
y:(canvas.height-image.height)/2+i+Math.random()*20,
fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
}
pixels.push(pixel);
}
}
}
}
function drawPixels() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);
var len = pixels.length, curr_pixel = null;
for (var i = 0; i < len; i++) {
curr_pixel = pixels[i];
ctx.fillStyle = curr_pixel.fillStyle;
ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);
}
}
|
粒子时钟
渲染文字时钟
1 2 3 4 5 6 7 | function time() {
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.font = "150px 黑体";
ctx.textBaseline='top';
ctx.fillStyle = "rgba(245,245,245,0.2)";
ctx.fillText(new Date().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);
}
|
效果
获取粒子
文字转换粒子概念同上，获取选定区域的像素，根据筛选条件进行选择并存入数组。经过遍历后重新绘制。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function getPixels(){
let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight);
let data = imgData.data
pixelsArr = []
for(let i=1;i<=textHeight;i++){
for(let j=1;j<=textWidth;j++){
pos=[(i-1)*textWidth+(j-1)]*4;
if(data[pos]>=0){
var pixel={
x:j+Math.random()*20,
y:i+Math.random()*20,
fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+','+(data[pos+3])+')'
};
pixelsArr.push(pixel);
}
}
}
}
|
imgData保存了所选区域内的像素信息，每个像素点占据4位，保存了RGBA四位信息。筛选每个像素的第四位，这段代码中将所有透明度不为0的像素都保存到了数组pixelsArr中。
x、y记载了该粒子的位置信息，为了产生效果图中的运动效果，给每个粒子添加了0-20个像素的偏移位置，每次重绘时，偏移位置随机生成，产生运动效果。
粒子重绘
获取粒子之后，需要清除画布中原有的文字，将获取到的粒子重新绘制到画布上去。
1 2 3 4 5 6 7 8 9 | function drawPixels() {
ctx.clearRect(0,0,canvas.width,canvas.height);
for (let i in pixelsArr) {
ctx.fillStyle = pixelsArr[i].fillStyle;
let r = Math.random()*4
ctx.fillRect(pixelsArr[i].x, pixelsArr[i].y, r, r);
}
}
|
粒子重绘时的样式为筛选像素时原本的颜色与透明度，并且每个在画布上绘制每个粒子时，定义大小参数r，r取值为0-4中随机的数字。最终生成的粒子大小随机。
实时刷新
获取粒子并成功重绘之后，需要页面实时刷新时间。这里采用window.requestAnimationFrame(callback)方法。
1 2 3 4 5 6 | function time() {
......
getpixels();
drawPixels();
requestAnimationFrame(time);
}
|
window.requestAnimationFrame(callback) 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
该方法不需要设置时间间隔，调用频率采用系统时间间隔（1s）。
文档解释戳这里
效果
总结
本文主要通过两种不同的方式实现了时钟的动态效果，其中粒子时钟具有更多的可操作性。在以后的canvas系列中会针对粒子系统实现更多的动态效果。
以上就是canvas中普通动效与粒子动效的实现 方法介绍（代码示例）的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
javascript some()方法怎么用
html5中globalcompositeoperation属性的详细介绍
html5在canvas中实现自定义路径动画详解
javascript介绍引入js代码
javascript如何加音乐
svg和css3实现环形渐变进度条的代码示例
深入浅析with的使用
详解javascript中的generator生成器
详解javascript之作用域
javascript如何给div设置高度
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » canvas中普通动效与粒子动效的实现 方法介绍（代码示例）
