您的位置:首页> HTML5教程> canvas API

canvas rotate()

2019-8-23 21:03| 作者: admin| 查看: 149| 评论: 0|来自: 蚂蚁部落

rotate方法可以将canvas图片围绕原点旋转指定的弧度。

关于原点的概念可以参阅canvas坐标系原点一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.rotate(angle);

特别说明:angle是要旋转的弧度,不要理解成角度,后面会给出换算公式。

浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(2).谷歌浏览器支持此方法。

(3).火狐浏览器支持此方法。

(4).Opera浏览器支持此方法。

(5).Safari浏览器支持此方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload= () => {
  let cvs=document.getElementById("myCanvas");
  let ctx=cvs.getContext("2d");
  ctx.rotate(20*Math.PI/180);
  ctx.fillRect(50,20,100,50);
}
</script>
</head>
<body>
<canvas id="myCanvas">当前浏览器不支持此标签</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/23/210403sid4lao8ai9589lm.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

canvas图片会围绕着左上角原点进行旋转,旋转了20度角,下面给出弧度与度的换算公式。

(1).假设要旋转的角度是degrees。

(2).那么换算成弧度就是degrees*Math.PI/180。

(3).上述代码中药旋转20度,那么就是20*Math.PI/180。

前文已经介绍过,canvas图形的默认原点位置是左上角叫,当然我们可以人为规定。

特别说明:围绕的是画布坐标系的原点进行旋转,并不是围绕图形左上角旋转。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style>
<script>
window.onload= () => {
  let cvs=document.getElementById("myCanvas");
  let ctx=cvs.getContext("2d");
  
  ctx.fillRect(50,20,100,50);
  
  ctx.fillStyle = 'red';
  ctx.rotate(48*Math.PI/180);
  ctx.fillRect(50,20,100,50);
}
</script>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持此标签</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/23/210434ser5nozzjujuqtdh.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).上述代码是为了演示旋转是围绕画布原点进行的,而不是图形左上角。

(2).黑色矩形演示了图形的默认位置。

(3).红色矩形这是旋转48度角后的位置,如果是围绕自身的左上角旋转,绝对不会在这个位置。

有时候我们期望矩形能够围绕自身的中心位置进行旋转,考虑到本文的篇幅问题,不在这里介绍了。

关于围绕自身中心位置旋转可以参阅canvas 围绕中心位置旋转一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部