canvas教程

图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)(3)

字号+ 作者:H5之家 来源:H5之家 2017-08-08 15:04 我要评论( )

程序实例化之后,还需要调用load方法加载指定的图片。 参数可以是图片的路径,data url(支持的话),ie6还可以用本地路径。 如果是gif图片,就要注意不要用canvas,原因上面也说了,canvas只能显示一帧图片。 使用

程序实例化之后,还需要调用load方法加载指定的图片。
参数可以是图片的路径,data url(支持的话),ie6还可以用本地路径。
如果是gif图片,就要注意不要用canvas,原因上面也说了,canvas只能显示一帧图片。


使用说明

实例化时,必须有容器对象或id作为参数:

然后调用load方法加载图片:

trans.load(img);


可选参数用来设置系统的默认属性,包括:
属性:    默认值//说明
mode:  "css3|filter|canvas",
zoom:  .1,//缩放比率
onPreLoad: function(){},//图片加载前执行
onLoad:  function(){},//图片加载后执行
onError: function(err){}//出错时执行
其中zoom、onPreLoad、onLoad、onError属性可以在程序初始化后动态设置。

提供以下变换方法:
vertical:垂直翻转
horizontal:水平翻转
rotate: 旋转
left:向左转90度
right:向右转90度
rotatebydegress:根据角度旋转
scale:缩放
zoomin:放大
zoomout:缩小

还提供了以下方法:
load:加载图片;
reset:重置图像为默认状态;
dispose:销毁程序。

加入拖动旋转扩展程序或滚轮缩放扩展程序后,会自动启用,可以自定义mouseRotate或mouseZoom属性为false来取消。


程序源码 

代码


拖动旋转扩展

代码


滚轮缩放扩展 

代码

 

完整实例下载

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 file API加canvas实现图片前端JS压缩并上传

    HTML5 file API加canvas实现图片前端JS压缩并上传

    2017-08-04 18:01

  • 利用canvas压缩图片

    利用canvas压缩图片

    2017-08-03 17:04

  • 有没办法获取video视频里的图片

    有没办法获取video视频里的图片

    2017-07-28 16:08

  • Android实现图片反转

    Android实现图片反转

    2017-07-28 15:04

网友点评
1