使用画布绘制曲线动画示例 - 绘制贝塞尔曲线动画
终于来到文章的本体啦,我们的目的不是绘制一条静态的曲线,我们想绘制一条有过渡效果的曲线。
简化一下问题,那就是我们希望绘制曲线的函数还接受另一个参数,表示绘制曲线的百分比。我们定时去调用这个函数,递增百分比这个参数,就能画出动画了。
我们新增一个参数percent
来表示百分比,现在函数变成了这样:
/** * 绘制一条曲线路径 * @param {Object} ctx canvas渲染上下文 * @param {Array<number>} start 起点 * @param {Array<number>} end 终点 * @param {number} curveness 曲度(0-1) * @param {number} percent 绘制百分比(0-100) */ function drawCurvePath( ctx, start, end, curveness, percent ) { // ... }</number></number>
但是canvas提供的quadraticCurveTo
方法只能绘制一条完整的二次贝赛尔曲线,没有办法去控制它只画一部分。
画完后用clearRect
擦除掉一部分?这不太可行,因为很难确定要擦除的范围。如果曲线的线宽比较宽,就还需要保证擦除的边界和曲线末端垂直,问题就变得很复杂了。
现在再重新看看这张图
我们是不是可以将percent
这个参数理解成t
值,然后通过贝赛尔曲线方程去计算出中间所有的点,用直线连接起来,以此模拟绘制贝赛尔曲线的一部分呢?
方法一
我们不再用canvas提供的quadraticCurveTo
来绘制曲线,而是通过贝赛尔曲线的方程计算出一系列点,用多端直线来模拟曲线。
这样做的好处时,我们可以很容易的控制绘制的范围。
那么函数实现就变成了这样:
/** * 绘制一条曲线路径 * @param {Object} ctx canvas渲染上下文 * @param {Array<number>} start 起点 * @param {Array<number>} end 终点 * @param {number} curveness 曲度(0-1) * @param {number} percent 绘制百分比(0-100) */ function drawCurvePath( ctx, start, end, curveness, percent ) { var cp = [ ( start[ 0 ] + end[ 0 ] ) / 2 - ( start[ 1 ] - end[ 1 ] ) * curveness, ( start[ 1 ] + end[ 1 ] ) / 2 - ( end[ 0 ] - start[ 0 ] ) * curveness ]; ctx.moveTo( start[ 0 ], start[ 1 ] ); for ( var t = 0; t <p>接下来就可以通过设置定时器,每隔一段时间调用一次这个方法,并且递增percent</p> <p>为了动画更加平滑,我们使用<code>requestAnimationFrame</code>来代替定时器</p> <pre class="brush:php;toolbar:false">nbsp;html> <title>draw curve</title> <canvas></canvas> <script> var canvas = document.getElementById( 'canvas' ); var ctx = canvas.getContext( '2d' ); ctx.lineWidth = 2; ctx.strokeStyle = '#000'; var percent = 0; function animate() { ctx.clearRect( 0, 0, 800, 800 ); ctx.beginPath(); drawCurvePath( ctx, [ 100, 100 ], [ 200, 300 ], 0.2, percent ); ctx.stroke(); percent = ( percent + 1 ) % 100; requestAnimationFrame( animate ); } animate(); function drawCurvePath( ctx, start, end, curveness, percent ) { // ... } </script>
得到的结果:
这样基本实现了我们的需求,但它有一个问题:
测试发现,进行一次lineTo
的时间和一次quadraticCurveTo
的时间差不多,但是quadraticCurveTo
只需要一次就能画出曲线,而使用lineTo
则需要数十次。
换言之,用这样的方式绘制曲线,和我们前面的实现方式相比性能下降了数十倍之多。在绘制一条曲线时可能感觉不到区别,但是如果需要同时绘制上千条曲线,性能就会受到很大的影响。
方法二
那有没有什么方法可以做到用quadraticCurveTo
来实现绘制完整曲线的一部分呢?
我们再次回到这张图
在中间的某一时刻,例如t=0.25时,它是这样的:
我们注意到,曲线P0-B
这一段似乎也是贝赛尔曲线,它的控制点变成了P0,Q0,B
。
现在问题就迎刃而解了,我们只需要每次计算出Q0,B
,就能得到其中一小段贝赛尔曲线的控制点,然后就可以通过quadraticCurveTo
来绘制它了。
代码如下:
/** * 绘制一条曲线路径 * @param {Object} ctx canvas渲染上下文 * @param {Array<number>} start 起点 * @param {Array<number>} end 终点 * @param {number} curveness 曲度(0-1) * @param {number} percent 绘制百分比(0-100) */ function drawCurvePath( ctx, start, end, curveness, percent ) { var cp = [ ( start[ 0 ] + end[ 0 ] ) / 2 - ( start[ 1 ] - end[ 1 ] ) * curveness, ( start[ 1 ] + end[ 1 ] ) / 2 - ( end[ 0 ] - start[ 0 ] ) * curveness ]; var t = percent / 100; var p0 = start; var p1 = cp; var p2 = end; var v01 = [ p1[ 0 ] - p0[ 0 ], p1[ 1 ] - p0[ 1 ] ]; // 向量<p0> var v12 = [ p2[ 0 ] - p1[ 0 ], p2[ 1 ] - p1[ 1 ] ]; // 向量<p1> var q0 = [ p0[ 0 ] + v01[ 0 ] * t, p0[ 1 ] + v01[ 1 ] * t ]; var q1 = [ p1[ 0 ] + v12[ 0 ] * t, p1[ 1 ] + v12[ 1 ] * t ]; var v = [ q1[ 0 ] - q0[ 0 ], q1[ 1 ] - q0[ 1 ] ]; // 向量<q0> var b = [ q0[ 0 ] + v[ 0 ] * t, q0[ 1 ] + v[ 1 ] * t ]; ctx.moveTo( p0[ 0 ], p0[ 1 ] ); ctx.quadraticCurveTo( q0[ 0 ], q0[ 1 ], b[ 0 ], b[ 1 ] ); }</q0></p1></p0></number></number>
将前面写的页面替换成上面的代码,可以看到得到的结果是一样的:
绘制动画
现在已经解决了最关键的问题,我们可以绘制动画啦。
不过这一部分并不重要,我就不贴代码了。
完整代码可以看这里
相关推荐:
Python之正弦曲线实现方法分析
使用CSS做贝塞尔曲线
css动画之模拟正余弦曲线的实例分享
以上就是用canvas绘制一个曲线动画实例的详细内容,更多请关注php中文网其它相关文章!