html画布用函数旋转,canvas rotate()画布的旋转详解

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

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

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

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

rotate()旋转当前的绘图。

语法：context.rotate(angle)

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

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

乡亲们注意啦？开会啦？

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

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

实例效果开始：html

border:1px solid #000;

}

var ctx=canvas.getContext('2d');

ctx.rotate(Math.PI/6);//正方向旋转30度

ctx.fillRect(100,100,300,200);

显示效果：

java

逆方向旋转30度怎么写？web

border:1px solid #000;

}

var ctx=canvas.getContext('2d');

ctx.rotate(-Math.PI/6);

ctx.fillRect(100,100,300,200);

显示效果：

canvas

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

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

border:1px solid #000;

}

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

显示效果图：

函数

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

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

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

是否是能够把矩形的原点移到画布的原点，而后进行旋转呢？想一想的效果以下图：

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

如今移入到了canvas的内部了，就万事大吉了？

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

spa

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

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

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