导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

HTML canvas rotate() 方法


实例

将矩形旋转 20 度

您的浏览器不支持 HTML5 canvas 标签。

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");


ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);
亲自试一试 »

描述

rotate() 方法旋转画布。

注意

旋转将影响调用 rotation 方法之后的绘图。

另请参阅

scale() 方法(缩放上下文)

translate() 方法(重新映射 0,0 位置)

transform() 方法 (缩放、旋转、移动、倾斜上下文)

setTransform() 方法(缩放、旋转、移动、倾斜上下文)。


语法

context.rotate(angle)

参数值

参数 描述 试一试
angle 旋转角度(以弧度为单位)
弧度 = 度数*Math.PI/180。
旋转 5 度:5*Math.PI/180
试一试 »

返回值


浏览器支持

<canvas> 元素是 HTML5 标准(2014)。

rotate() 受所有现代浏览器支持

           
Chrome Edge Firefox Safari Opera IE
9-11

Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。