canvas

心情无变化

已于 2023-12-06 13:15:46 修改

阅读量391

点赞数 9

分类专栏： canvas 文章标签：前端 javascript 开发语言 canva可画

于 2023-12-04 10:17:56 首次发布

本文链接：https://blog.csdn.net/qq_45290368/article/details/134777221

版权

canvas 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

canvas旋转绘制的元素

const canvas = document.getElementById(“myCanvas”);
const ctx = canvas.getContext(“2d”);
const x = 100; // 矩形左上角的 x 坐标
const y = 100; // 矩形左上角的 y 坐标
const width = 200; // 矩形的宽度
const height = 100; // 矩形的高度
const rotationAngle = 30; // 旋转角度
// 绘制未旋转的矩形
ctx.fillStyle = “blue”;
ctx.fillRect(x, y, width, height);
// 旋转画布
ctx.translate(x + width / 2, y + height / 2);
ctx.rotate((rotationAngle * Math.PI) / 180); // 将角度转为弧度
ctx.translate(-x - width / 2, -y - height / 2);
// 绘制旋转后的矩形
ctx.fillStyle = “red”;
ctx.fillRect(x, y, width, height);

首先使用ctx.fillRect()方法绘制了一个蓝色的矩形[未旋转]，该矩形的左上角坐标为(x, y)，宽度为width，高度为height。
实现旋转的步骤：
1、使用ctx.translate()将画布的原点移动到矩形的中心位置。
2、调用ctx.rotate()方法将画布旋转了30度，弧度(rotationAngle * Math.PI) / 180。
3、再次使用ctx.translate()将画布的原点移回初始位置。
通过旋转画布，在旋转后的状态下绘制了一个红色的矩形。