首页 > 其他 > 详细

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

时间:2016-10-23 02:59:09      阅读:393      评论:0      收藏:0      [点我收藏+]

自己无意中的一个小“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实现超绚丽的旋转正方形

原文:http://www.cnblogs.com/xiamuqing/p/5988902.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!