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

canvas 动态飞速旋转的矩形

时间:2016-10-31 00:46:33      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:pre   ota   context   path   style   cti   head   har   XML   

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>变形</title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            //1.旋转
            context.translate(200, 200);  //平移到正方形中心
            var deg = 360;
            setInterval(function () {
                rotate(deg * 180 / Math.PI);
                deg/4;
            }, 100)

            var rotate = function (deg) {
                context.rotate(deg);
                context.fillRect(-50, -50, 100, 100);
                context.clearRect(-50, -50, 100, 100);
                context.beginPath();
                context.moveTo(-100, -100);
                context.lineTo(100, 100);
                context.moveTo(-100, 100);
                context.lineTo(100, -100);
                context.closePath();
                context.strokeStyle = "#00ff00";
                context.stroke();
            }
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="1000">
        您的浏览器暂不支持画布!
    </canvas>
</body>
</html>

 

canvas 动态飞速旋转的矩形

标签:pre   ota   context   path   style   cti   head   har   XML   

原文地址:http://www.cnblogs.com/xiaoyumi666/p/6014445.html

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