这篇文章主要介绍“html5中如何实现贝赛尔曲线动画”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html5中如何实现贝赛尔曲线动画”文章能帮助大家解决问题。

二次贝赛尔曲线

/***二次贝塞尔曲线动画*@param{Array<number>}start起点坐标*@param{Array<number>}曲度点坐标(也就是转弯的点,不是准确的坐标,只是大致的方向)*@param{Array<number>}end终点坐标*@param{number}percent绘制百分比(0-100)*/functiondrawCurvePath(start,point,end,percent){ctx.beginPath();//开始画线ctx.moveTo(start[0],start[1]);//画笔移动到起点for(vart=0;t<=percent/100;t+=0.005){//获取每个时间点的坐标varx=quadraticBezier(start[0],point[0],end[0],t);vary=quadraticBezier(start[1],point[1],end[1],t);ctx.lineTo(x,y);//画出上个时间点到当前时间点的直线}ctx.stroke();//描边}/***二次贝塞尔曲线方程*@param{Array<number>}start起点*@param{Array<number>}曲度点*@param{Array<number>}end终点*@param{number}绘制进度(0-1)*/functionquadraticBezier(p0,p1,p2,t){vark=1-t;returnk*k*p0+2*(1-t)*t*p1+t*t*p2;}

放入完整的代码中:

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>二次贝塞尔曲线动画</title><style>body{background:#0f1632;}#canvas{border:1pxsolid#ccc;}#img{display:none;<!--img直接隐藏就行,后面会直接引用-->}</style></head><body><canvasid="canvas"width="1500"height="750"></canvas><imgid="img"src="https://s3.imgsha.com/2019/04/22/light.png"><script>varctx=document.getElementById('canvas').getContext('2d');varimg=document.getElementById('img');varpercent=0;vardata={start:[400,200],point:[300,100],end:[100,400],department:'数据1',value:4321}functioninit(){percent=0;//每次重置进程draw();}functiondraw(){ctx.clearRect(0,0,1500,750);//每次清除画布ctx.strokeStyle='#ffffff';//设置线条样式drawCurvePath(data.start,data.point,data.end,percent);percent+=0.8;//进程增加,这个控制动画速度if(percent<=100){//没有画完接着调用,画完的话重置进度requestAnimationFrame(draw);}else{init()}}functiondrawCurvePath(start,point,end,percent)//...}functionquadraticBezier(p0,p1,p2,t){//...}</script></body></html>

动画就出来了

之前说了 drawCurvePath(start, point, end, percent)函数中point这个参数不是具体曲度的点,只是一个大致的方向

再开看一下 point改为[200,200]的情况

添加渐变

如果想实现坠落的效果,由高到低由远及近需要给线条加一个渐变的效果

/***创建线性渐变*@param{Array<number>}start起点*@param{Array<number>}曲度点*@param{Array<number>}end终点*@param{number}绘制进度(0-1)*/functioncreateLinearGradient(start,end,startColor,endColor){varlineGradient=ctx.createLinearGradient(...start,...end);lineGradient.addColorStop(0,startColor);//lineGradient.addColorStop(0.3,'#fff');lineGradient.addColorStop(1,endColor);returnlineGradient}//draw函数需要做些调整functiondraw(){//ctx.strokeStyle='#ffffff';ctx.strokeStyle=createLinearGradient(data.start,data.end,'rgba(255,255,255,.2)','#fff');//...}

头部光晕

添加头部光晕需要画一个圆,并设置径向渐变,利用drawCurvePath函数获取x,y并重置圆的位置

functioncreateHeadLight(x,y){ctx.beginPath();//创建径向渐变varradialGradient=ctx.createRadialGradient(x,y,0,x,y,20);radialGradient.addColorStop(0,"rgba(255,255,255,1)");radialGradient.addColorStop(.2,"rgba(255,255,255,.8)");radialGradient.addColorStop(1,"transparent");ctx.fillStyle=radialGradient;//画圆ctx.arc(x,y,20,0,2*Math.PI,false);ctx.fill();}//drawCurvePath函数需要做些调整functiondrawCurvePath(start,point,end,percent){//...ctx.stroke();//描边createHeadLight(x,y)//和画线频率一样画圆}

添加文本

添加文本和添加头部光晕很相似,都是利用drawCurvePath函数获取x,y并重置文本块的位置

/***创建文本*@param{String}部门数据*@param{Number}数据*@param{Number}x轴坐标*@param{Number}y轴坐标*/functiondrawText(department,value,x,y){ctx.fillStyle='#fff'ctx.font="22px微软雅黑";ctx.fillText(department,x+30,y+20);//为了使文本在光晕右下角x,y轴需要偏移一些距离varwidth=ctx.measureText(value).width;//获取文本的宽度ctx.fillStyle=createLinearGradient([x+30,0],//文本渐变x轴的渲染范围是[x+30,x+30+文本的宽度],[x+30+width,0],//这里y取0,是因为没找到获取文本高的api,写0也是可以的'#fffd00','#ff6d00');ctx.fillText(value.toLocaleString(),x+30,y+50);}//drawCurvePath函数需要做些调整functiondrawCurvePath(start,point,end,percent,department,value){//...createHeadLight(x,y)drawText(department,value,x,y)}

动画完成后结束位置添加文本和图片

动画完成后添加文本和图片需要注意下,曲线动画完成后需要立即清理画布,然后添加文本和图片

/***创建图片*@param{Number}x轴坐标*@param{Number}y轴坐标*/functiondrawImg(x,y){ctx.drawImage(img,x-img.width/2,y-img.height);}//draw函数需要做些调整draw(){//...if(percent<=100){requestAnimationFrame(draw);}else{ctx.clearRect(0,0,1500,750);//曲线动画完立即清除画布drawText(data.department,//渲染文本data.value,data.end[0],data.end[1])drawImg(data.end[0],data.end[1])//渲染图片setTimeout(function(){//2000ms后重绘init()},2000)}}

关于“html5中如何实现贝赛尔曲线动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。