首页 > 代码库 > 使用canvas实现超绚丽的旋转正方形

使用canvas实现超绚丽的旋转正方形

2024-08-17 12:45:18   220人阅读

自己无意中的一个小“bug”，却让动画变得超绚丽= =

所以，不要害怕出bug，谁知道bug不会开出一朵绚丽的花呢？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
         body{
                text-align: center;
            }
            canvas{
                border:1px dashed green;
            }
        </style>
    </head>
    <body>
         <canvas id="cvs" width="800" height="600"></canvas>
    <script>
        var cvs=document.getElementById("cvs");
        var context=cvs.getContext("2d");

        /*超绚丽的旋转*/
        var agle=0;
        context.translate(cvs.width/2-50,cvs.height/2-50)
        setInterval(function () {
            //擦除画布，（因为坐标轴旋转的原因，没有擦完全）
            context.clearRect(-800,-600,800,600);
            context.rotate(agle);
            context.strokeRect(0,0,100,100);
            agle+=0.01;
        },30)

    </script>
    </body>

</html>

技术分享

使用canvas实现超绚丽的旋转正方形


联系
我们