canvas绘图 -实现图片围绕中心点旋转

今天想要学习制作一个抽奖的转盘，想用canvas来绘制转盘，于是重新学习了一下canvas.

1、canvas的使用

要使用元素，必须先设置其width和height属性，制定额可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持元素，就会显示后备信息。

<canvas id="inner-circle" width="510px" height="510px">您的浏览器不支持canvas</canvas>

在画布上绘图，需要取得绘图上下文。

var canvas = document.getElementById("inner-circle");
var context = canvas.getContext("2d");

2、因为有设计好的抽奖psd文件，所以，切图完毕后，需要用canvas绘制图片，用到了drawImage()，这个函数接受的参数 要绘制的图像，绘制的x坐标，y坐标。

var canvas = document.getElementById("inner-circle");
var context = canvas.getContext("2d");var image = new Image();
image.onload=function(){
context.drawImage(image,0,0);
}
image.src = "images/inner-circle.png";

3、需要编写旋转函数，让转盘旋转。这一步的时候，遇到了困难，因为如果想让图像围绕着其中心点旋转，需要移动绘图原点。

function rotate(){
var x = canvas.width/2; //画布宽度的一半
var y = canvas.height/2;//画布高度的一半
context.clearRect(0,0, canvas.width, canvas.height);//先清掉画布上的内容
context.translate(x,y);//将绘图原点移到画布中点
context.rotate((Math.PI/180)*5);//旋转角度
context.translate(-x,-y);//将画布原点移动
context.drawImage(image,0,0);//绘制图片
}

4.调用rotate(),用self.setInterval(rotate,80);每隔一段时间调用一次

至此，转盘就可以旋转了

rotate()函数编写的时候，参考了很多网上的文章，也花费了一些功夫，这一篇讲的比较明白理解canvas的rotate中心点