几天前我在stackoverflow上询问如何将箭头缓慢地绘制到画布上。然而没人能给我正确的答案...所以我希望这能帮助到其他人。
基本上,我想要通过动画的方式,在地图上演示一个国家侵略另一个国家的过程。为了实现这个目标,我需要使用canvas,并且需要绘制一个从A国家移动到B国家的箭头,但不是固定箭头...是一种逐渐增长的箭头。
下面的代码可以绘制箭头,但不是逐步进行的。因此,我需要像CSS动画一样用5秒的过渡来绘制这条曲线。
基本上,我想要通过动画的方式,在地图上演示一个国家侵略另一个国家的过程。为了实现这个目标,我需要使用canvas,并且需要绘制一个从A国家移动到B国家的箭头,但不是固定箭头...是一种逐渐增长的箭头。
下面的代码可以绘制箭头,但不是逐步进行的。因此,我需要像CSS动画一样用5秒的过渡来绘制这条曲线。
function drawCurve (ctx, x0, y0, x1, y1, x2, y2){
ctx.beginPath();
ctx.moveTo( x0, y0 );
ctx.quadraticCurveTo( x1, y1, x2, y2 );
ctx.stroke();
ctx.closePath();
}
var docCanvas = document.getElementById('canvas');
var ctx = docCanvas.getContext('2d');
drawCurve(ctx, 0, 100, 150, -50, 300, 100);
<canvas id="canvas" width="480" height="320"></canvas>