您的位置：首页 > 其它

canvas rotate()画布的旋转详解

2017-10-14 18:30 134 查看

刚才还是风和日丽的天，这没一会会就乌云密布了，雨呀，眼瞅就下来了呢，一场秋雨一场寒，感觉懂得要穿棉袄了的节奏

10月1号之前，还是T恤呢，10月放完国庆节和中秋节以后就开始毛衣、毛衫、毛外套了，这真的是8天过了一个季节呀~~~

大概北方的秋天都是这么快的吧

继续来看看canvas的rotate()方法

rotate()旋转当前的绘图。

语法：context.rotate(angle)

参数：angle旋转角度，以弧度计（n*Math.PI）

举例：假如想要旋转60度，可以context.rotate(Math.PI/3)进行表示；

乡亲们注意啦？开会啦？

旋转的中心是在整个画布的左上角（0,0），旋转的正方向是顺时针，旋转的反方向是逆时针，

重点：canvas中的rotate方法是绕画布左上角（0,0）进行旋转的，而且会受到translate的影响

实例效果开始：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
ctx.rotate(Math.PI/6);//正方向旋转30度
ctx.fillRect(100,100,300,200);
</script>
</body>
</html>

显示效果：

逆方向旋转30度怎么写？

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
ctx.rotate(-Math.PI/6);
ctx.fillRect(100,100,300,200);
</script>
</body>
</html>

显示效果：

既然知道了旋转，那我们来做一个好玩的，燥起来，燥起来…..

需求：做一个旋转的矩形，并且以矩形的中心为原点，围绕原点旋转

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
<script>
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
//3.把旋转的矩形平移进画布
ctx.translate(300,300);
var timer=setInterval(function(){
//4.清除的点需要注意         ctx.clearRect(-151,-101,canvas.width,canvas.height);
//1.定义一个旋转的方法,确定每次时间间隔中要旋转多少弧度
ctx.rotate(0.01*Math.PI);
//2.绘制一个矩形，因为需求要求矩形以中心为轴进行旋转，但是canvas中rotate只能以画布左上角为轴，进行旋转
//因此，只要使矩形的中心和画布的左上角重合就可以了(起点的横纵坐标为矩形宽高的一半)
ctx.strokeRect(-150,-100,300,200);
},5);
</script>
</body>
</html>

显示效果图：

既然是持续旋转马上想到的肯定就是setInterval，每间隔5毫秒执行一次函数

在想到的就是用到canvas中的rotate()方法，让矩形旋转一定的角度

接下来遇到难点了，就是rotate旋转都是以画布的左上角为原点进行旋转的，那想让矩形围绕矩形的中心点旋转需要怎么办呢？

是不是可以把矩形的原点移到画布的原点，然后进行旋转呢？想想的效果如下图：

那么这个问题解决了，接下来就是，人家要求矩形是在画布的内部，怎样让图像移到画布的内部呢？就用到canvas translate()方法进行平移，详情可点击链接

现在移入到了canvas的内部了，就万事大吉了？

no no no 可能噩梦才刚刚开始，又出现了个bug，效果如图：

我去哪里是噩梦？感觉这个画面还挺炫的有没有？

不过它终究不是客户想要的效果，问题来了，为什么会发生重复叠加的效果？ok,没清除canvas中每次旋转的效果，所以导致图片的效果累加起来，那就需要用clearRect进行清除，那清除的其实坐标在哪里呢？这可是重点，就是矩形起点的横纵坐标+法线外面的1px虚影，所以clearRect(-151,-101,canvas.width,canvas.height);

大功告成！！！撒花撒花！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航