Canvas特效动画

越陌度阡

发布于 2020-11-26 16:52:55

2K0

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

给大家分享一个用Canvas绘图写成的动画特效，动画的效果如下：

以下是代码实现：

<!DOCTYPE html>
<html>

<head>
    <title>Canvas特效动画</title>

    <style>
        canvas {
            background: #eee;
        }
    </style>
    <script>
        window.onload = function () {
            var canvas = document.getElementById("canvas");
            var cobj = canvas.getContext("2d");
            var starArr = [];
            for (var i = 0; i < 30; i++) {
                var starObj = {
                    radius1: 20 + 10 * Math.random(), 
                    radius2: 8 + 7 * Math.random(), 
                    x: 30 + (canvas.width - 60) * Math.random(), 
                    y: 30 + (canvas.height - 60) * Math.random(), 
                    num: Math.ceil(4 + 4 * Math.random()), 
                    color: "rgb(" + parseInt(255 * Math.random()) + "," + parseInt(255 * Math.random()) + "," + parseInt(255 * Math.random()) + ")", 
                    angle: 360 * Math.random(), 
                    changeAngle: -5 + 10 * Math.random()
                };
                starArr.push(starObj);
            }
            setInterval(function () {
                cobj.clearRect(0, 0, 500, 500);
                for (var i = 0; i < starArr.length; i++) {
                    starArr[i].angle += starArr[i].changeAngle;
                    cobj.save();
                    cobj.beginPath();
                    cobj.translate(starArr[i].x, starArr[i].y);
                    cobj.rotate(starArr[i].angle * Math.PI / 180);
                    cobj.scale(Math.sin(starArr[i].angle * Math.PI / 180), Math.sin(starArr[i].angle * Math.PI / 180))
                    cobj.globalAlpha = Math.abs(Math.sin(starArr[i].angle * Math.PI / 180));
                    drawStar(0, 0, starArr[i].radius1, starArr[i].radius2, starArr[i].num, "fill", starArr[i].color);
                    cobj.restore();
                }
            }, 60);

            function drawStar(x, y, radius1, radius2, num, drawType, color) {
                var angle = 360 / (num * 2);
                var arr = [];
                for (var i = 0; i < num * 2; i++) {
                    var starObj = {};
                    if (i % 2 == 0) {
                        starObj.x = x + radius1 * Math.cos(i * angle * Math.PI / 180);
                        starObj.y = y + radius1 * Math.sin(i * angle * Math.PI / 180);
                    } else {
                        starObj.x = x + radius2 * Math.cos(i * angle * Math.PI / 180);
                        starObj.y = y + radius2 * Math.sin(i * angle * Math.PI / 180);
                    }
                    arr.push(starObj);
                }
                cobj.beginPath();
                cobj.fillStyle = color;
                cobj.strokeStyle = color;
                cobj.moveTo(arr[0].x, arr[0].y);

                for (var i = 1; i < arr.length; i++) {
                    cobj.lineTo(arr[i].x, arr[i].y);
                }
                cobj.closePath();
                if (drawType == "fill") {
                    cobj.fill();
                } else {
                    cobj.stroke();
                }
            }
        }
    </script>
</head>

<body>
    <canvas id="canvas" width=500 height=500></canvas>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/06/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

动画