今天和大家分享個(gè)有關(guān)于:“如何使用canvas繪制折線路徑動(dòng)畫?案例分享!”這方面的相關(guān)內(nèi)容,下面是小編整理的相關(guān)內(nèi)容!
最近有讀者加我微信咨詢這個(gè)問(wèn)題:
其中的效果是一個(gè)折線路徑動(dòng)畫效果,如下圖所示:
要實(shí)現(xiàn)以上路徑動(dòng)畫,一般可以使用svg的動(dòng)畫功能?;蛘呤褂胏anvas繪制,結(jié)合路徑數(shù)學(xué)計(jì)算來(lái)實(shí)現(xiàn)。
如果用canvas來(lái)繪制,其中的難點(diǎn)在于:
- 需要計(jì)算子路徑,這塊計(jì)算比較復(fù)雜。(當(dāng)然是可以實(shí)現(xiàn)的)
- 漸變的計(jì)算, 從圖中可以看出,動(dòng)畫的子路徑是有漸變效果的,如果要分段計(jì)算漸變也很復(fù)雜。
本文介紹一種思路,使用clip方法,動(dòng)態(tài)移動(dòng)clip的區(qū)域,來(lái)達(dá)到近似的效果。具體怎么做。
繪制灰色路徑
繪制路徑的代碼比較簡(jiǎn)單,此處就不詳細(xì)說(shuō)明,下面代碼就模擬了了一個(gè)折線路徑的繪制:
ctx.beginPath();
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 = "gray";
ctx.lineJoin = "round";
ctx.stroke();
效果如下:
繪制亮色路徑
繪制亮色路徑的代碼和繪制灰色路徑的代碼一樣,只是樣式是一個(gè)亮的顏色:
ctx.save();
ctx.beginPath();
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 = "gray";
ctx.lineJoin = "round";
ctx.stroke();
效果如下:
clip控制亮色路徑的繪制區(qū)域
canvas的clip方法可以控制繪制的區(qū)域,通過(guò)該方法,可以控制智繪制路徑的一部分:
ctx.beginPath();
ctx.rect(offset,0,100,500); // offset 等于0
ctx.clip();
...
ctx.stroke();
clip之后,亮色路徑就只會(huì)繪制一部分,如下圖:
動(dòng)畫效果
通過(guò)不斷變化offset的值,就可以大道亮色路徑移動(dòng)的效果,代碼如下:
offset += 2;
if(offset > 600){
offset = 100;
}
requestAnimationFrame(animate);
最終效果如下:
漸變
我們知道漸變沒法沿著任意路徑,如果計(jì)算折線,分段計(jì)算漸變又很麻煩。 其實(shí)在本案例中,雖然是折線,但是整體的運(yùn)動(dòng)方向總是從左往右的,所以可以用從左往右的漸變來(lái)近似模擬既可以:
function createGradient(ctx,x0,y0,x1,y1){
var grd = ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0,'#129ab3');
grd.addColorStop(1,"#19b5fe");
return grd;
}
ctx.strokeStyle = createGradient(ctx,offset,0,offset + 100,0);
最終效果如下所示:
全部代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line animate</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var ctx = document.getElementById( 'canvas' ).getContext( '2d' );
var w = canvas.width,
h = canvas.height;
var x = w / 2,y = h / 2;
function setupCanvas(canvas) {
let width = canvas.width,
height = canvas.height,
dpr = window.devicePixelRatio || 1.0;
if (dpr != 1.0 ) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * dpr;
canvas.width = width * dpr;
ctx.scale(dpr, dpr);
}
}
setupCanvas(canvas);
var offset = 100;
function createGradient(ctx,x0,y0,x1,y1){
var grd = ctx.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0,'#9a12b3');
grd.addColorStop(1,"#19b5fe");
return grd;
}
function animate(){
ctx.fillStyle = "black";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.lineWidth = 3;
ctx.save();
ctx.beginPath();
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 = "gray";
ctx.lineJoin = "round";
ctx.stroke();
ctx.beginPath();
ctx.rect(offset,0,150,500);
ctx.clip();
ctx.beginPath();
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.lineWidth = 4;
ctx.strokeStyle = createGradient(ctx,offset,0,offset + 150,0);
ctx.lineCap = "round";
// ctx.globalCompositeOperation = 'lighter';
ctx.lineJoin = "round";
ctx.stroke();
ctx.restore();
offset += 2;
if(offset > 600){
offset = 100;
}
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
總結(jié)
其實(shí)整體思路是用了近似,而不是嚴(yán)格的控制路徑長(zhǎng)度和漸變效果,這樣可以更方便實(shí)現(xiàn)以上功能。 其實(shí)人眼有時(shí)候是分辨不出來(lái)一些細(xì)節(jié),可視化,有的時(shí)候只有能夠達(dá)到讓人“覺得”是那么回事,其實(shí)目的也就達(dá)到了。
以上方案只能適用于,折線路徑的整體方向是一致的。如果整體方向是先水平向右,然后在垂直向下,或者甚至出現(xiàn)往回拐的情況,就不適合了。
通過(guò)上面這篇文章的分享想必大家對(duì)于:“如何使用canvas繪制折線路徑動(dòng)畫?案例分享!”這方面的內(nèi)容有所了解了吧!當(dāng)然了在html5中相關(guān)的內(nèi)容不僅僅如此,更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解!