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

canvas绘图 -实现图片围绕中心点旋转相关推荐

html5 中心点旋转,html5 canvas围绕中心点旋转
围绕中心点旋转 window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canva ...
一个围绕中心点旋转的动画效果
View围绕中心点旋转,直接上代码: final ObjectAnimator animator = ObjectAnimator.ofFloat(imageView, "rotation& ...
利用CSS让图片围绕中心旋转
起因: 需要一个刷新按钮,一点击就自己旋转一圈,刚开始是想到做一个GIF图,点击图片后就换图片路径. 今天创建react脚手架的时候,看到了react的LOGO在自己动,就看了看他的css. 代码: ...
css动画将图片绕着中心点旋转
@keyframes App-logo-spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);} }@media (pr ...
fabricjs 围绕对象中心点旋转
先吐槽一下现在网上搜索的东西,莆田货先不说,牛鬼蛇神,各显神通,要么是千篇一律.答非所问,要么是无人善后的半吊子回答,再要么是上个世纪的古董玩意儿,这样让我们这些面向百度编程的人很难办啊! 围绕左上角 ...
Android Canvas.roate中心点旋转问题
在自定义View时候使用Canvas画图时候有时候需要对内容进行旋转,在使用roate旋转时候都知道围绕中心点旋转.但是中心点是哪里呢,中心点就是绘制区域的左上角,假如现在已经使用canvas绘制了好 ...
C#图片动画效果(旋转360度)异步
private void Button1_Click(object sender, EventArgs e){Graphics graphics = this.CreateGraphics();gra ...
canvas绘图中的图片组合
canvas绘图中的图片组合时间2020-4-4周六(第一次写,也就是一个学习总结) 1.canvas简介 canvas使用方法各种样式及例子(只需要在两个图片的代码中加入globalCompos ...
Android中Canvas绘图之Shader使用图文详解
概述我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...

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

canvas绘图 -实现图片围绕中心点旋转相关推荐

最新文章

热门文章