canvas 动态飞速旋转的矩形

最新推荐文章于 2024-09-02 17:34:07 发布

dichi9321

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量122

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoyumi666/p/6014445.html

版权

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

转载于:https://www.cnblogs.com/xiaoyumi666/p/6014445.html

dichi9321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 动态飞速旋转的矩形

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>变形</...
复制链接

扫一扫