canvas 动态飞速旋转的矩形 

<!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>

 

posted @ 2016-10-30 23:37  米小玉  阅读(139)  评论(0)  编辑  收藏  举报