季诗筱的博客

分享个人公众号“季诗筱”

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中心点

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/XIAOZHUXMEN/article/details/50732038
文章标签: canvas rotate
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭