canvas 图形围绕中心旋转

2019-8-24 13:39| 作者: admin| 查看: 233| 评论: 0|来自: 蚂蚁部落

通过rotate()方法可以实现图案的旋转功能。

上述方法具体使用可以参阅canvas rotate()一章节。

默认,图案是围绕画布坐标系的原点进行旋转,很多时候可能需要围绕图案的中心旋转。

本文以矩形图案围绕其中心点进行旋转进行一下介绍。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid black;
}  
</style>
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");

  ctx.translate(100,50);
  let angle=10;

  let rotate = () => {
    ctx.clearRect(-100,-50,200,100);
    ctx.rotate(angle*Math.PI/180);
 
    ctx.fillRect(-50,-25,100,50);
    setTimeout(rotate,16);
  }
  rotate()
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/24/134017mis15oikhq3khz7w.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面只是一个静态示意图,实际代码能够让矩形围绕其中心旋转。

代码分析如下:

首先要明确translate()和rotate()方法都是对于坐标系的操作。

[JavaScript] 纯文本查看 复制代码
ctx.translate(100,50);

默认,画布的原点位置在左上角(0,0)位置。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/24/134042k4x4uaguuncxxucx.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过上述代码可以将画布坐标系的原点位置移动到原来坐标系的(100,50)位置。

[JavaScript] 纯文本查看 复制代码
let angle=10;

既然rotate()方法也是对坐标系的操作,上述代码规定每次坐标系旋转的角度。

[JavaScript] 纯文本查看 复制代码
ctx.rotate(angle*Math.PI/180);

有朋友可能要问,为什么旋转的角度不用累加,因为旋转对坐标系的操作,所以无需累加。

上述代码可以将整个坐标系旋转angle度角。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/24/134213a3pdvzchp3vz33pl.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码演示了将坐标系旋转一定的角度。

[JavaScript] 纯文本查看 复制代码
ctx.fillRect(-50,-25,100,50);

采用上述代码绘制一个黑色的矩形,如果不专门设置填充色,默认为黑色。

在一个倾斜的坐标系绘制图案,图案默认也是倾斜的。

矩形的绘制起始坐标是(-50,-25),特别注意的是现在是以新的坐标系原点为参考,而不是原来的左上角。

很明显分别从x轴和y轴的反方向50和25像素出开始绘制,矩形的中心恰好与坐标系中心重合。

[JavaScript] 纯文本查看 复制代码
ctx.clearRect(-100,-50,200,100);

上述代码是将上一次绘制的图案擦除,你也可以精确设置擦除的区域,也可以设置一个大区域保证擦除效果。


鲜花

握手

雷人

路过

鸡蛋
返回顶部