资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JavaScript如何实现图片旋转效果-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!

十余年的大同网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整大同建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“大同网站设计”,“大同网站推广”以来,每个客户项目都认真落实执行。

这篇文章将为大家详细讲解有关JavaScript如何实现图片旋转效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

在Canvas API中,上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法:

void rotate(in float angle); // 按给定的弧度顺时针旋转angle

rotate()方法旋转的中心始终是canvas的原点。如果要改变旋转中心,需要使用translate方法。

我们可以将绘制的图形每隔一定的时间间隔后,旋转一定的角度重新绘制一次,这样就可以得到旋转的动画效果。

1.旋转的扇叶

将一个梯形按顺时针旋转90°的方式绘制4次,可以绘制出一个扇叶图案。将绘制的扇叶图案每隔0.1秒后顺时针旋转12°,重新绘制一遍,得到旋转的扇叶动画。

编写如下的HTML代码。





	旋转的扇叶

	





	

	




当前标题:JavaScript如何实现图片旋转效果-创新互联
路径分享:http://cdkjz.cn/article/dspgid.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220