Canvas實現貝賽爾曲線軌跡動畫

時間 2019-11-08

標籤 canvas 實現曲線軌跡動畫简体版

原文原文鏈接

最近實現的下圖的效果,跟你們分享一下
html

假如咱們要畫下圖曲線的動畫
git

若是每次都畫一條短線鏈接起來,以下圖被分紅五段
github

再看十段

要是被分的段數足夠多時每次畫一段就很像曲線軌跡了canvas

二次貝賽爾曲線

/**
 * 二次貝塞爾曲線動畫
 * @param  {Array<number>} start 起點座標
 * @param  {Array<number>} 曲度點座標(也就是轉彎的點,不是準確的座標,只是大體的方向)
 * @param  {Array<number>} end 終點座標
 * @param  {number} percent 繪製百分比(0-100)
 */
 
  function drawCurvePath(start, point, end, percent){
            ctx.beginPath();    //開始畫線
            ctx.moveTo(start[0], start[1]);   //畫筆移動到起點
            for (var t = 0; t <= percent / 100; t += 0.005) {
                //獲取每一個時間點的座標
                var x = quadraticBezier(start[0], point[0], end[0], t);   
                var y = 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)
 */
     function quadraticBezier(p0, p1, p2, t) {
            var k = 1 - t;
            return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2; 
        }

更加詳細的貝塞爾曲線內容請參考這篇博客api

放入完整的代碼中函數

<!DOCTYPE html>
<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: #0f1632;
        }

        #canvas {
            border: 1px solid #ccc;
        }
         #img {
            display: none; 
            <!--img直接隱藏就行,後面會直接引用-->
        }
        
    </style>
</head>

<body>
    <canvas id="canvas" width="1500" height="750"></canvas>
    <img id="img" src="https://s3.imgsha.com/2019/04/22/light.png">
    
    <script>
        var ctx = document.getElementById('canvas').getContext('2d');
        var img = document.getElementById('img');
        var percent = 0;
        var data = {
                start: [400, 200],
                point: [300, 100],
                end: [100, 400],
                department: '數據1',
                value: 4321
            }
            
        function init(){
            percent = 0;  //每次重置進程
            draw();
        }
        function draw(){
            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()
            }
        }
        function drawCurvePath(start, point, end, percent)
            //...
        }
        function quadraticBezier(p0, p1, p2, t) {
            //...
        }
    </script>
</body>

</html>

動畫就出來了

以前說了 drawCurvePath(start, point, end, percent)函數中point這個參數不是具體曲度的點,只是一個大體的方向
動畫

再開看一下 point改成[200,200]的狀況
ui

添加漸變

若是想實現墜落的效果,由高到低由遠及近須要給線條加一個漸變的效果
spa

/**
 * 建立線性漸變
 * @param  {Array<number>} start 起點
 * @param  {Array<number>} 曲度點
 * @param  {Array<number>} end 終點
 * @param  {number} 繪製進度(0-1)
 */
function createLinearGradient(start,end,startColor,endColor){
  var lineGradient = ctx.createLinearGradient(...start, ...end);
                lineGradient.addColorStop(0, startColor);
                // lineGradient.addColorStop(0.3, '#fff');
                lineGradient.addColorStop(1, endColor);
  return lineGradient
}
//draw函數須要作些調整
function draw(){
    //ctx.strokeStyle = '#ffffff';
      ctx.strokeStyle = createLinearGradient(data.start,
                                             data.end,
                                             'rgba(255,255,255,.2)',
                                             '#fff'
                                             );
     //...
}

canvas漸變詳情請參考MDN3d

頭部光暈

添加頭部光暈須要畫一個圓,並設置徑向漸變,利用drawCurvePath函數獲取x,y並重置圓的位置

function createHeadLight(x,y){
  ctx.beginPath();
  //建立徑向漸變
  var radialGradient = 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函數須要作些調整
function drawCurvePath(start, point, end, percent){
        //...
         ctx.stroke();   //描邊
         createHeadLight(x,y) //和畫線頻率同樣畫圓
    }

繪製圓arc參數詳情參考MDN

添加文本

添加文本和添加頭部光暈很類似,都是利用drawCurvePath函數獲取x,y並重置文本塊的位置

/**
 * 建立文本
 * @param  {String} 部門數據
 * @param  {Number} 數據
 * @param  {Number} x軸座標
 * @param  {Number} y軸座標
 */
function drawText(department, value, x, y) {
            ctx.fillStyle = '#fff'
            ctx.font = "22px 微軟雅黑";
            ctx.fillText(department, x + 30, y + 20);  //爲了使文本在光暈右下角x,y軸須要偏移一些距離
            var width = 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函數須要作些調整
 function drawCurvePath(start, point, end, percent, department, value) {
           //...
           createHeadLight(x,y)
           drawText(department, value, x, y)
        }

動畫完成後結束位置添加文本和圖片

動畫完成後添加文本和圖片須要注意下,曲線動畫完成後須要當即清理畫布,而後添加文本和圖片

/**
 * 建立圖片
 * @param  {Number} x軸座標
 * @param  {Number} y軸座標
 */
function drawImg(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)
            }
    
}