利用html5 canvas旋转图片实例演示-kb88凯时官网登录

时间:2020-09-30
阅读:
免费资源网,https://freexyz.cn/

实例演示:

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

免费资源网,https://freexyz.cn/
返回顶部
顶部
网站地图