CanvasRenderingContext2D.rotate()

了解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中的这张添加了栅格的示意图：

案例

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)(

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:05