canvas贝塞尔曲线运动,canvas绘制贝塞尔曲线

　　我想和大家分享一下下图的近期效果。

　　假设我们想制作下面这条曲线的动画。

　　如果每次都画一条短线连接，下图分为五段。

　　再看十段。

　　如果有足够多的线段，一次画一个线段就会像一条弯曲的轨迹。

　　二次贝赛尔曲线

　　/* * *二次贝塞尔曲线动画* @param {Arraynumber} start起点坐标* @param {Arraynumber}曲率点坐标(也就是转折点，不是精确坐标，只是大致方向)* @param {Arraynumber}终点坐标* @param {number}百分比绘制百分比(0-100)*/函数绘制曲线路径(start，point，end，percent){ CTX . begin path()；//开始绘制ctx.moveTo(start[0]，Start[1])；//画笔移动到起点for(var t=0；t=百分比/100；T=0.005) {//获取每个时间点的坐标var x=二次贝塞尔(start [0]，point [0]，end [0]，t)；var y=quadraticBezier(start[1]，point[1]，end[1]，t)；ctx.lineTo(x，y)；//从上一个时间点到当前时间点画一条直线} CTX . stroke()；//Stroke}/* * *二次贝塞尔曲线方程* @param {Arraynumber}起点* @param {Arraynumber}曲率点* @param {Arraynumber}终点* @param {number}绘制进度(0-1)*/函数二次贝塞尔曲线(P0，P1，P2，T返回k * k * P0 2 *(1-T)* T * P1 T * T * p2；}关于贝塞尔曲线更详细的内容请参考本博客。

　　放在完整的代码里。

　　！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title二次贝塞尔曲线动画/title style body { background:# 0f 1632；} # canvas { border:1px solid # CCC；} #img { display:无；- img直接隐藏就好，-}/style/headbydy canvas id= canvas width= 1500 height= 750 /canvas img id= img src= 3359s3.imgsha.com/2019/04/22/之光. png script var CTX=document . getelementbyid( canvas )。get context( 2d )；var img=document . getelementbyid( img )；var百分比=0；Var={start: [400，200]，point: [300，100]，end: [100，400]，department: data 1 ，value:4321 } function init(){ percent=0；//每次重置进程draw()时；}函数draw(){ ctx.clearRect(0，0，1500，750)；//每次都清除画布ctx.strokeStyle= # ffffff//设置线条样式绘制曲线路径(data.start，data.point，data.end，percent)；百分比=0.8；//进程增加，这个控制动画速度if (percent=100) {//如果没有完成，就调用。如果完成，它将重置进度requestAnimationFrame(draw)；} else {init ()}}函数绘制曲线路径(起点、点、终点、百分比)//.}函数二次贝塞尔(P0，P1，P2，t) {//.}/脚本/正文/html动画出来了。

　　如前所述，drawcurvepath (start，point，end，percent)函数中的参数点不是一个特定曲率的点，而是一个大致的方向。

　　我们来看点改成[200，200]的情况。

　　添加渐变

　　如果想达到下降的效果，需要给线条加上从高到低，从远到近的渐变效果。

　　/** * 创建线性渐变* @param {Arraynumber} start起点* @param {Arraynumber}曲度点* @param {Arraynumber} end终点* @param {number}绘制进度(0-1)*/function createlanegradient(start，end，startColor，end color){ var line gradient=CTX。创建线性梯度(.开始，end)；lineGradient.addColorStop(0，开始颜色)；//线条渐变。addcolorstop(0.3， # fff )；lineGradient.addColorStop(1，结束颜色)；返回线条渐变}//绘制函数需要做些调整函数draw(){//CTX。stroke style= # ffffffCTX。stroke style=createlanegradient(data。start，data.end， rgba(255，255，255，2)， # fff )；//.}画布渐变详情请参考移动用户号码簿号码

　　头部光晕

　　添加头部光晕需要画一个圆，并设置径向渐变，利用绘制曲线路径函数获取x，y并重置圆的位置

　　函数创建头灯(x，y){ CTX。begin path()；//创建径向渐变变化径向梯度=CTX。createaradialgradient(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，"透明");CTX。填充样式=径向渐变；//画圆ctx.arc(x，y，20，0，2 *数学。圆周率，假);CTX。fill()；}//drawCurvePath函数需要做些调整函数绘制曲线路径(起点、终点、终点、百分比){ //.CTX。笔画()；//描边创建头灯(x，y) //和画线频率一样画圆}绘制圆弧参数详情参考移动用户号码簿号码

　　添加文本

　　添加文本和添加头部光晕很相似，都是利用绘制曲线路径函数获取x，y并重置文本块的位置

　　/** * 创建文本* @param {String}部门数据* @param {Number}数据* @param {Number} x轴坐标* @param {Number} y轴坐标*/function drawText(部门，值，x，y){ CTX。填充样式= # fff CTX。font= 22px微软雅黑；ctx.fillText(部门，x 30，y 20)；//为了使文本在光晕右下角x，y轴需要偏移一些距离var width=ctx.measureText(value).宽度；//获取文本的宽度CTX。填充样式=createlaneragradient([x 30，0]，//文本渐变x轴的渲染范围是[x 30，x 30文本的宽度]，[x 30宽度，0],//这里y取0,是因为没找到获取文本高的api，写0也是可以的#fffd00 ， # ff6d 00 )；CTX。填充文本(值。tolocalestring()，x 30，y 50)；} //drawCurvePath函数需要做些调整函数绘制曲线路径(起点、点、终点、百分比、部门、值){ //.创建头灯(x，y)绘图文本(部门，值，x，y) }动画完成后结束位置添加文本和图片

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

　　/** * 创建图片* @param {Number} x轴坐标* @param {Number} y轴坐标*/function drawImg(x，y) { ctx.drawImage(img，x - img.width/2，y-img。身高)；}//绘制函数需要做些调整draw(){ //.if(percent=100){ requestAnimationFrame(draw)；}else{ ctx.clearRect(0，0，1500，750)；//曲线动画完立即清除画布drawText(data.department，//渲染文本数据值，数据结束[0]，数据。end[1])绘图(数据。end[0]，data.end[1]) //渲染图片setTimeout(函数(){//2000毫秒后重绘init() }，2000) } }结束

　　本篇示例完整代码

　　文章首图示例完整代码

　　参考文章：用画布3354画一个曲线动画，深入理解贝塞尔曲线。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

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