当在画布上画一个圆，并在一半上涂红色，在一部分圆上涂灰色时，点击红色时，我们调用函数1。
点击灰色部分时，调用函数2，并且我们需要使用可重用的路径对象来存储我们想要测试的不同部分。点击处理程序可以用来共享画布并完成我们想要的工作。可以使用Path2D对象来存储路径信息。
var path1 = new Path2D(); var path2 = new Path2D(); var newpaths = [path1,path 2]; // Array is needed to store paths path1.arc(200, 85,650, -0.2 * Math.PI, 2.7 * Math.PI); // Path for red part path2.arc(200, 85, 60, 2.7 * Math.PI, -1.1 * Math.PI); //Path for grey part // Two path objects are rendered using a common context ctx1, but with different style ctx1.lineWidth = 16; ctx1.strokeStyle = "#d43030"; ctx1.stroke(path1); ctx1.strokeStyle = "#b8b8b8"; ctx1.stroke(path2);
然后使用 x 轴和 y 轴检查公共画布上的点击
然后迭代路径数组以测试每个路径的点击情况。
html5全屏可拖拽的横向图片布局
下载
html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布，可以通过鼠标前后拖拽图片。当点击图片的标号数字时，隐藏所有的缩略图，在屏幕上显示当前被点击的图片放大，文本内容展示效果。
// Then it is attached with corresponding canvas.
