Canvas 动效实例

直线轨迹动效

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;background-color:black">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient = ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

    var t = 0;
    var animationDotSpeed = 0.08;  
    var dotNumber = 25; 
    var dotRadius = 1; 
    var dotColor = 'rgb(255,255,188)'
    var averageX = 109.0139239130436;
    var averageY = 34.44264656750581;
    var range = 15;
    var width = 500;
    var height = 400;
    
    animationDot();
    function animationDot(){
        ctx.clearRect(0,0,width,height);
        drawAnimate();
        requestAnimationFrameName = requestAnimationFrame(animationDot);
    }
    
    function drawAnimate(){
        var arr1 = [
            [[200,200],[300,200]],
            [[200,200],[350,230]],
            [[200,200],[60,90]],
            [[200,200],[350,90]],
            [[200,200],[350,360]],
            [[200,200],[150,360]],
        ]
        arr1.map(item=>{
            drawDots(item[0],item[1])
        })
        if (t >= Math.sqrt(200)) {
            t = 0;
        }
        t += animationDotSpeed; 
        function drawDots (start,end){
            ctx.save();
            // 画线
            ctx.beginPath();
            ctx.lineWidth = 1
            ctx.strokeStyle = 'green';
            ctx.moveTo(start[0],start[1]);
            ctx.lineTo(end[0],end[1]);
            ctx.closePath();
            ctx.stroke();
            ctx.restore();
            //画25个点
            for (var i = 0; i < dotNumber; i++) {
                var _t = (t - animationDotSpeed * i * 0.5) >= 0 ? (t - animationDotSpeed * i * 0.5) : Math.sqrt(200) + (t - animationDotSpeed * i * 0.5);       
                // quad.easeIn
                var x = (end[0]-start[0])*(_t/200)*_t+start[0];
                var y = (end[1]-start[1])*(_t/200)*_t+start[1];
                ctx.save();
                ctx.fillStyle = 'rgba(' + dotColor.split('(')[1].split(')')[0] + ',' + (1 - 1 / dotNumber * i) + ')'
                ctx.beginPath();
                ctx.arc(x,y,dotRadius,0,2*Math.PI);  //dotRadius=1 半径为1的圆
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }
        }
    }
    
</script>

</body>
</html>
光圈辐射动效

rgba的a值和半径的变化。
Canvas 动效实例

直线轨迹动效

光圈辐射动效

推荐阅读更多精彩内容
