189 8069 5689

js旋转图片的功能-创新互联

最近突然想研究一下js旋转图片的功能。对于之前的实现方式,就不先说了。现在HTML5很不错,主要了解一下HTML5中的图片旋转吧。

成都创新互联主要从事网站制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务宣恩,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

实例演示:

http://www.imqing.com/demo/rotateImg.html

原理:利用canvas对象来旋转。

实现方式:首先创建一个canvas元素,然后把img元素绘入canvas。但是,实际上,这是默认情况,就是图片没旋转时。如果图片要旋转90度的话,就需要先把canvas画布旋转90度后再绘图。

描述如下: (内部旋转原理是这样的,图片的坐标是从左上角开始计算,向右为x正方向,向下为y正方向,在旋转画布canvas时,实际上是这个坐标在旋转,所以最后绘图方式不一样。当时我还用了picpick来测量旋转一定角度后起点坐标,才知道原来旋转是这样的,嘿嘿。)

代码:

  
    向左旋转  
    向右旋转
            

解释: canvas.width与height就不用解释了吧,应该。rotate应该也不用吧?关键是
drawImage(img, x, y);

其中的x,y是指从哪一点开始画,因为整个坐标系统旋转了,所以,x,y不一样,比如step=1,图片向右旋转了90度,即坐标系旋转了90度,那么起始位置应该是
x = 0,  y= img.height

其它类似可得。是不是觉得很简单呢?

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:js旋转图片的功能-创新互联
网页链接:http://cdxtjz.cn/article/pocpe.html

其他资讯