44-rotate方法实现图形旋转-CSDN博客

本文链接：https://blog.csdn.net/gaowxx/article/details/148833180

44-rotate方法实现图形旋转_哔哩哔哩_bilibili44-rotate方法实现图形旋转是一次性学会 Canvas 动画绘图（核心精讲+50个案例）2023最新教程的第45集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.videopod.episodes&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=45

// canvas的旋转，注意：canvas的角度用的都是弧度制
context.rotate(45 * Math.PI / 180)

// 位移 + 旋转，实现指定位置的旋转效果
context.translate(200, 200)
context.rotate(45 * Math.PI / 180)


// 绘制一个方形
// 注意：绘制在0,0位置
// context.fillRect(0, 0, 100, 100)
context.fillRect(-50, -50, 100, 100) // 注意，这里的-50 -50，是为了让正方形的中心在200,200的位置上

【效果图】

【完整代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            background-color: #ccc;
            display: block;
            margin: auto;
        }
    </style>
</head>

<body>
</body>
<script>
    const canvas = document.createElement('canvas');
    canvas.width = 600;
    canvas.height = 400;
    document.body.append(canvas);
    const context = canvas.getContext('2d');

    // canvas的位移api
    // 所有的位置变换都是基于原点的变化（左上角）
    // 在0，0初始位置绘制方形，之后它会根据translate进行100,100的偏移
    // context.translate(100, 100)

// 位移 + 旋转，实现指定位置的旋转效果
context.translate(200, 200)
context.rotate(45 * Math.PI / 180)


// 绘制一个方形
// 注意：绘制在0,0位置
// context.fillRect(0, 0, 100, 100)
context.fillRect(-50, -50, 100, 100) // 注意，这里的-50 -50，是为了让正方形的中心在200,200的位置上

    // 因为translate，圆心也是出现在 100,100 的位置
    // context.arc(0, 0, 50, 0, 2 * Math.PI)
    // context.stroke()

</script>

</html>