了解CanvasRenderingContext2D.rotate()

简介

单位是弧度。,CanvasRenderingContext2D.rotate()给Canvas画布添加旋转矩阵,顺时针方向

默认旋转中心点是Canvas的左上角(0, 0)坐标点,如果希望改变旋转中心点,例如以Canvas画布的中心旋转,需要先使用translate()位移旋转中心点。

角度转弧度计算公式是:radian = degree * Math.PI / 180。例如,旋转45°,旋转弧度就是45 * Math.PI / 180

语法

context.rotate(angle);

参数

angle
Number
Canvas画布坐标系旋转的角度,单位是弧度。注意,此旋转和CSS3的旋转变换不一样,旋转的是坐标系,而非元素。因此,实际开发的时候,旋转完毕,需要将坐标系再还原。

可参考MDN中的这张添加了栅格的示意图:

Canvas旋转示意图

案例

1:基本旋转

文字旋转45°,JavaScript代码如下:

// 旋转45度
context.rotate(45 * Math.PI / 180);
// 字体填充
context.font = '20px STHeiti, SimHei';
context.fillText('旋转,跳跃,我闭着眼', 60, -40, 188);
// 重置当前的变换矩阵为初始态
context.setTransform(1, 0, 0, 1, 0, 0);

实时效果如下:

2. 画布和图片同步旋转

图片90°旋转,为了视觉显示1像素不差,需要将画布的宽高设置为旋转后的图片高宽尺寸,实时效果如下:

完整代码如下:

<canvas id="canvas2" width="200" height="300"></canvas>
var context = canvas2.getContext('2d');
var width = canvas2.width;
var height = canvas2.height;
// 加载图片素材
var img = new Image();
img.onload = function () {
    // 先位移坐标到中心
    context.translate(width / 2, height / 2);
    // 旋转90度
    context.rotate(90 * Math.PI / 180);
    // 此时按照旋转后的尺寸
    // 把定位中心移动到左上角
    context.translate(-1 * height / 2, -1 * width / 2);
    // 绘制图片
    context.drawImage(this, 0, 0, height, width);
    // 坐标系还原到初始
    context.setTransform(1, 0, 0, 1, 0, 0);
};
img.src = './1.jpg';

其他

规范文档

规范地址 规范状态 备注
HTML现行标准
这个规范中定义了'CanvasRenderingContext2D.rotate'
现行标准 -

相关资源

暂无

兼容性

IE9+支持,全兼容。


by zhangxinxu 2019-10-18 01:44:05