使用Canvas绘制旋转动画
使用Canvas绘制旋转动画。在使用Canvas绘制旋转动画时我们会遇到一个问题：使用context.rotate();是将画布进行旋转，而并不是画布上的绘制的图形，那我们要怎样做才能使画布上图形旋转呢？
假设现在已经写好了页面，定义了Canvas元素，下边列出js代码：
1.创建画布：
var context=Elem.getContext('2d');//Elem为接收到的Canvas元素
2.获取画布的宽高
const WIDTH=Elem.width; const HEIGHT=Elem.height;3.加载要绘制的图片：
var img=new Image(); img.src="xxx.png";4.平移画布：
context.translate(WIDTH/2,HEIGHT/2);5.绘制图片
img.onload=function(){
context.drawImage(img,-img.width/2,-img.height/2);
}
//到此，静态图片效果已经出来了6.旋转图片
context.rotate(Math.PI); context.drawImage(img,-img.width/2,-img.height/2);//旋转完进行再次绘制这已经完成了一个旋转动作，如果要连续旋转，只需在加上定时器与时间控制即可。
- 上一篇：java的数学运算
- 下一篇：HDU 2844 Coins【多重背包】
相关文章
图文推荐
- 文章
- 推荐
- 热门新闻