canvas画线动画,canvas绘制直线

　　最近有读者加我微信问这个问题：

　　的效果是多段线路径动画效果，如下图所示：

　　要实现上述路径动画，一般可以使用svg的动画功能。或者用画布画，结合路径的数学计算。

　　如果用画布来画，难点在于：

　　你需要计算子路径，比较复杂。(当然可以实现)梯度的计算。从图中可以看出，动画的子路径有渐变效果，分段计算渐变也很复杂。本文介绍了一种思想，利用裁剪方法动态移动裁剪区域，达到近似的效果。具体怎么做。

绘制灰色路径

　　绘制路径的代码比较简单，这里就不详细解释了。以下代码模拟折线路径的绘制：

　　CTX . begin path()；ctx.moveTo(100，100)；ctx.lineTo(200，100)；ctx.lineTo(230，200)；ctx.lineTo(250，50)；ctx.lineTo(270，180)；ctx.lineTo(300，60)；ctx.lineTo(330，160)；ctx.lineTo(350，60)；ctx.lineTo(380，100)；ctx.lineTo(480，100)；ctx.strokeStyle= grayctx.lineJoin= roundCTX . stroke()；效果如下：

绘制亮色路径

　　绘制明亮路径的代码与绘制灰色路径的代码相同，只是样式是明亮的颜色：

　　CTX . save()；CTX . begin path()；ctx.moveTo(100，100)；ctx.lineTo(200，100)；ctx.lineTo(230，200)；ctx.lineTo(250，50)；ctx.lineTo(270，180)；ctx.lineTo(300，60)；ctx.lineTo(330，160)；ctx.lineTo(350，60)；ctx.lineTo(380，100)；ctx.lineTo(480，100)；ctx.strokeStyle= grayctx.lineJoin= roundCTX . stroke()；效果如下：

clip控制亮色路径的绘制区域

　　 canvas的clip方法可以控制绘制区域。通过这种方法，您可以控制智能绘图路径的一部分：

　　CTX . begin path()；ctx.rect(偏移量，0，100，500)；//offset等于0 CTX . clip()；CTX . stroke()；裁剪后，亮色路径只会绘制一部分，如下图所示：

动画效果

　　通过不断改变offset的值，可以移动大道的明亮路径。代码如下：

　　offset=2；if(偏移量600){ offset=100；} requestAnimationFrame(animate)；最终效果如下：

渐变

　　我们知道渐变是不能遵循任何路径的，如果计算折线的话分段计算渐变是很麻烦的。其实在这种情况下，虽然是折线，但整体运动方向始终是从左到右，所以可以用从左到右的渐变来近似模拟：

　　函数createGradient(ctx，x0，y0，x1，y1){ var grd=CTX . createlineargradient(x0，y0，x1，y1)；grd.addColorStop(0， 129 ab 3 )；grd.addColorStop(1， # 19 b5 Fe )；返回grd} CTX . stroke style=create gradient(CTX，offset，0，offset 100，0)；最终效果如下：

　　所有代码

　　！doctype html html lang= in head meta charset= utf-8 标题行动画/标题样式画布{ border:1px solid # 000；}/style/head body canvas id= canvas width= 600 height= 400 /canvas var CTX脚本=文档。getelement byid(“canvas”).get context( 2d ):var w=canvas . width，h=canvas。heightvar x=w/2，y=h/2；函数setupdcanvas(canvas){ let width=canvas。宽度，高度=画布。高度，DPR=窗口。devicementiratio 1.0如果(dpr！=1.0){ canvas。风格。宽度=宽度 px ；画布。风格。height=height px画布。height=height * dprcanvas。宽度=宽度* dprctx。规模(朝鲜民主主义人民共和国、DPR)；} }设置画布(canvas)；var offset=100:函数creategradients(CTX，0x 0，y0，x1，y 1){ var grd=CTX。创建线性渐变(0x 0，y0，x1，y1)；grd。添加colors top(0， # 9a 12 B3 )；grd。添加colors top(1， # 19 b5 Fe )；返回grd}动画函数(){ ctx。fillstyle= blackctx.fillRect(0，0，canvas.width，canvas。身高)；CTX . line width=3:CTX . save():CTX . begin path():CTX。已移动(100、100);ctx.lineTo(200，100)；CTX。line to(230.200)；CTX。line to(250.50)；ctx.lineTo(270，180)；CTX。line to(300.60)；ctx.lineTo(330，160)；CTX。line to(350.60)；CTX。line to(380.100)；CTX。line to(480.100)；ctx。strokestyle= grayctx。linejoin= roundCTX。笔画()；ctx.beginPath():ctx.rect(偏移，0.150,500);ctx.clip():ctx.beginPath():ctx。已移动(100、100);ctx.lineTo(200，100)；CTX。line to(230.200)；CTX。line to(250.50)；ctx.lineTo(270，180)；CTX。line to(300.60)；ctx.lineTo(330，160)；CTX。line to(350.60)；CTX。line to(380.100)；CTX。line to(480.100)；ctx。线宽=4:CTX。strokesstyle=创建渐变(CTX，偏移量，0，偏移量150，0)；ctx。CTX。全局构图操作=‘光’；ctx。linejoin= roundCTX。笔画()；ctx.restore():偏移=2:如果(偏移600){偏移=100;} requestanimationframe(动画);}动画();/script/body/html

总结

　　其实整体思路是用了近似，而不是严格的控制路径长度和渐变效果，这样可以更方便实现以上功能。其实人眼有时候是分辨不出来一些细节，可视化，有的时候只有能够达到让人""觉得""是那么回事，其实目的也就达到了。

　　以上方案只能适用于，折线路径的整体方向是一致的。如果整体方向是先水平向右，然后在垂直向下，或者甚至出现往回拐的情况，就不适合了。

　　到此这篇关于-肉桂绘制折线路径动画实现的文章就介绍到这了，更多相关-肉桂折线路径动画内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。