全国服务热线:4008-888-888

技术知识

Canvas完成贝赛尔曲线图运动轨迹动漫的示例编码

近期完成的下图的实际效果,跟大伙儿共享1下

倘若大家要画下图曲线图的动漫

假如每次都画1条短线联接起来,以下图被分为5段

再看10段

如果被分的段数充足多时每次画1段就很像曲线图运动轨迹了

2次贝赛尔曲线图

/**
 * 2次贝塞尔曲线图动漫
 * @param  {Array<number>} start 起始点座标
 * @param  {Array<number>} 曲度点座标(也便是拐弯的点,并不是精确的座标,只是大概的方位)
 * @param  {Array<number>} end 终点站座标
 * @param  {number} percent 绘图百分比(0⑴00)
 */
 
  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();   //描边
        }
        
        
/**
 * 2次贝塞尔曲线图方程
 * @param  {Array<number>} start 起始点
 * @param  {Array<number>} 曲度点
 * @param  {Array<number>} end 终点站
 * @param  {number} 绘图进度(0⑴)
 */
     function quadraticBezier(p0, p1, p2, t) {
            var k = 1 - t;
            return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2; 
        }

更为详尽的贝塞尔曲线图內容请参照这篇blog

放入详细的编码中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2次贝塞尔曲线图动漫</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这个主要参数并不是实际曲度的点,只是1个大概的方位

再开看1下 point改成[200,200]的状况

加上渐变色

假如想完成跌落的实际效果,由高到低由远及近必须给线条加1个渐变色的实际效果

/**
 * 建立线形渐变色
 * @param  {Array<number>} start 起始点
 * @param  {Array<number>} 曲度点
 * @param  {Array<number>} end 终点站
 * @param  {number} 绘图进度(0⑴)
 */
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渐变色详细信息请参照MDN

头顶部光晕

加上头顶部光晕必须画1个圆,并设定轴向渐变色,运用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) //和画线频率1样画圆
    }

绘图圆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轴必须偏位1些间距
            var width = ctx.measureText(value).width;   //获得文字的宽度
            ctx.fillStyle = createLinearGradient([x + 30, 0],   //文字渐变色x轴的3D渲染范畴是[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,   //3D渲染文字
                         data.value, 
                         data.end[0], 
                         data.end[1])
                drawImg(data.end[0], data.end[1])   //3D渲染照片
                  setTimeout(function(){    //2000ms后重绘
                     init()
                  },2000)
            }
    
}

完毕

本篇示例详细编码

文章内容首图示例详细编码

参照文章内容:用canvas绘图1个曲线图动漫——深层次了解贝塞尔曲线图

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服