canvas 动效,canvas粒子动画教程
Canvas用于在网页上绘制图像和动画。可以理解为画布，想要的效果可以建立在这个画布上。
画布可以画出动态效果。除了常规动画，它还可以使用粒子的概念来实现复杂的动态效果。本文分别利用普通动态效果和粒子特效实现了一个简单的时钟。
普通时钟
普通动画是用canvas api实现规则的图案和动画。
影响
这个效果实现起来比较简单。本文主要分析了刻度尺与指针之间角度偏差的实现。
绘制刻度
这个例子是小时刻度的绘制：表盘上有12个小时，数学。圆周率是180，每小时占30。save()的意思是保存画布当前环境的状态，并在此基础上进行绘制。绘制完成后，返回之前保存的路径状态和属性。
分钟刻度是一样的，换个角度和样式就行了。
//小时时间刻度offscreencanvasctx . save()；for(var I=0；i 12I){ offscreencanvasctx . begin path()；//Scale color offscreencanvasctx . stroke style= # fff ；//刻度宽度offscreencanvasctx . line width=3；//每小时占用30 offscreencanvasctx . rotate(math.pi/6)；//开始绘制的位置offscreencanvasctx.lineto (140，0)//结束绘制的位置；offscreenCanvasCtx.lineTo(120，0)；//绘制路径offscreencanvasctx . stroke()；} offscreencanvasctx . restore()；指针指向
以秒针为例：获取当前时间的秒，计算对应的偏移角度。
var now=new Date()，sec=now.getSeconds()，min=now.getMinutes()，HR=now . get hours()；hr=hr 12？HR-12:HR；//秒针offscreencanvasctx . save()；offscreenCanvasCtx.rotate(sec *(数学。PI/30))；offscreencanvasctx . stroke()；粒子动效
Canvas可以用来画复杂不规则的动画。粒子特效可以用来实现复杂和随机的动态效果。
粒子是指imageData中的每个像素。获取每个像素后，添加属性或事件与区域中的粒子进行交互，以实现动态效果。
影响
粒子获取
下图转换成例子。效果是先把图片渲染到画布上，然后得到文本所在区域的每一个像素。
let Image=new Image()；image.src=./image/logo . png ；设像素=[]；//存储像素数据let imageDataimage.width=300Image.height=300 //渲染图片并获取像素信息image . onload=function(){ CTX . draw image(image，(canvas.width-image.width)/2，(canvas.height-image.height)/2，image.width，image . height)；imageData=CTX . getimagedata((canvas . width-image.width)/2，(canvas.height-image.height)/2，image . width，image . height)；//获取图表像素信息//绘制图像}；像素信息
图片尺寸为300*300，共90000个像素，每个像素占用4位，存储rgba数据。
粒子绘制
函数get pixels(){ var pos=0；var data=imageData.data//RGBA的一维数组数据//源图像的高度和宽度为300 px for(var I=1；i=image.widthI){ for(var j=1；j=image.heightj){ pos=[(I-1)* image . width(j-1)]* 4；//获取像素位置if(data[pos]=0){ var pixel={ x:(canvas . width-image . width)/2j math . random()* 20，//重置每个像素的位置信息Y:(canvas . height-image . height)/2 imath . random()* 20，//重置每个像素的位置信息Fillstyle: rgba (data [pos]，(data [pos 1])，(data [pos 2]) } } }函数draw pixels(){ var=document . getelementbyid( myvar CTX=canvas . get context( 2d )；ctx.clearRect(0，0，canvas.width，canvas . height)；var len=pixels.length，curr _ pixel=nullfor(var I=0；我lenI){ curr _ pixel=pixels[I]；CTX . fill style=curr _ pixel . fill style；ctx.fillRect(curr_pixel.x，curr_pixel.y，1，1)；} }粒子时钟
渲染文本时钟
函数time () {ctx.clearrect (0，0，canvas.width，canvas . height)CTX . font= 150 px bold ；ctx.textBaseline= topctx.fillStyle=rgba(245，245，245，0.2)；ctx.fillText(新日期()。format(hh:mm:ss )，(canvas.width-textWidth)/2，(canvas.height-textHeight)/2，textWidth，text height)；}效果
获取粒子
转换文本粒子的概念同上。获取所选区域的像素，根据过滤条件选择并存储在数组中。遍历后，重画。
函数get pixels(){ let img data=CTX . getimagedata((canvas . width-textWidth)/2，(canvas.height-textHeight)/2，text width，text height)；let data=img data . data pixel arr=[]for(let I=1；i=textHeighti ){ for(设j=1；j=文本宽度；j){ pos=[(I-1)* text width(j-1)]* 4；//获取像素位置if(data[pos]=0){ var pixel={ x:jmath . random()* 20，//重置每个像素的位置信息y:i Math.random()*20，//重置每个像素的位置信息fillStyle: rgba( data[pos])(data[pos 1])，(data[pos 2])，(data[pos 3])) }；pixelsArr.push(像素)；}}} }imgData保存选中区域的像素信息，每个像素占用4位，保存4位RGBA信息。过滤每个像素的第四位。在这段代码中，所有不透明度为0的像素都保存到pixelsArr数组中。
x和Y记录了粒子的位置信息。为了在渲染中产生运动效果，0-20像素的偏移位置被添加到每个粒子。每次重画时，偏移位置是随机产生的，以产生运动效果。
粒子重绘
获得粒子后，需要清除画布中的原始文本，并在画布上重新绘制获得的粒子。
函数drawPixels() {//清除画布内容，重绘CTX.clearrect (0，0，canvas.width，canvas . height)；for(let I in pixel sarr){ CTX . fill style=pixel sarr[I]。fillStyle设r=math . random()* 4 CTX . fill rect(pixel sarr[I].x，pixelsArr[i]。y，r，r)；}}}粒子重绘的样式是像素过滤时的原始颜色和透明度，在画布上绘制每个粒子时，定义大小参数r，r的值是0到4之间的随机数。最终的颗粒大小是随机的。
实时刷新
获得粒子并成功重绘后，需要实时页面刷新时间。这里使用了window.requestanimation帧(回调)方法。
函数时间(){.get pixels()；//获取粒子draw pixels()；//重绘粒子requestAnimationFrame(time)；} window.requestAnimationFrame(回调)方法告诉浏览器你要执行动画，并请求浏览器在下次重绘前调用指定函数更新动画。此方法将回调函数作为参数，该函数将在浏览器重绘之前被调用。
这种方法不需要设置时间间隔，调用频率为系统时间间隔(1s)。
在此处加盖文件说明章
影响
总结
本文主要通过两种不同的方式实现时钟的动态效果，其中粒子时钟更具有可操作性。在未来的canvas系列中，将为粒子系统实现更多的动态效果。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。