HTML5之创新的视频拼图剖析式学习之二

发布时间:2019-11-24  栏目:计算机教程  评论:0 Comments


AxeSlide软件项目梳理 
 canvas绘图系列知识点整理

网站中第一部分第二页《月熊的标志》是月熊志中互动性较强的一页,页面上会随机分布9块视频碎片,用户可以通过鼠标或者触控移动碎片完成拼图。

html5中标签canvas,函数drawImage():

图片 1

使用drawImage()方法绘制图像。绘图环境提供了该方法的三个不同版本。参数传递三种形式:

 

1)drawImage(image,x,y):在canvas中(x,y)处绘制图片。

在这个Demo中,我们需要引用2个JavaScript库,jQuery和Hammer.js。

2)drawImage(image,x,y,width,height):在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度。

Hammer.js
是一个手势触控JS库,能够为网页加入Tap、Swipe、Drag等事件,并且同时支持鼠标和触控输入,免去自己监听事件和判断浏览器兼容等问题。

3)drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height):从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight),缩放到指定的宽度和高度,并在canvas中(x,y)绘制出来。

留下评论

网站地图xml地图