canvas实现矩形绕着中心点旋转 

参考博客：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <canvas id="canvas" style="border:1px solid #000" width="600" height="600"> </canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var angle = 10;
        setInterval(function(){
            ctx.clearRect(0,0,canvas.width,canvas.height);//清屏
            ctx.save();
            ctx.beginPath();
            ctx.translate(300,250);//围绕矩形的中心点旋转
            ctx.rotate(angle*Math.PI/180)//设置矩形旋转
            // 绘制矩形
            ctx.fillStyle = 'red'
            ctx.fillRect(-100,-50,200,100)//fillrect(矩形宽度的一半，矩形高度的一半，矩形长度，矩形宽度)
            ctx.restore();
            angle++
        },20)

    </script>
</body>

</html>
posted @ 2020-04-23 10:53  Fanyee  阅读(1620)  评论(1)    收藏  举报