码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:doctype   clear   使用   val   img   script   没有   getc   html   

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

标签:doctype   clear   使用   val   img   script   没有   getc   html   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!