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

Posted 2020-08-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用canvas实现超绚丽的旋转正方形相关的知识，希望对你有一定的参考价值。

自己无意中的一个小“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实现超绚丽的旋转正方形的主要内容，如果未能解决你的问题，请参考以下文章

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段

绚丽爱心和3d旋转方块以及照片墙