WEB前端第六十八课——H5新特性：Canvas案例（刮刮乐、小球动画，图片无缝滚动）

1.刮刮乐

　　案例目标：利用canvas绑定事件，模拟简单刮刮乐程序。

　　案例思路：在canvas画布上引入是否中奖背景图片，然后在图片上覆盖涂层，当鼠标点击

　　　　　　　并移动时擦出路径上的涂层，显示中奖信息。

　　主要事件：onload，onmousedown，onmousemove，onmouseup

　　代码示例：

    
    


    
        "您的浏览器不支持Canvas！"
    
    

2.小球动画

　　⑴ 一个小球动画

　　　　代码示例：

　　⑵ 随机多个小球

　　　　代码示例：

　　⑶ prototype

　　　　每一个函数都有一个默认的属性——prototype，prototype的属性值也是一个对象，

　　　　是属性的集合，而prototype对象的默认属性只有一个——constructor，指向函数本身，

　　　　但是可以通过prototype自定义添加函数的属性。

　　　　语法示例：Fn.prototype.peo='str' || fn(){} ;

3.图片无缝滚动

　　该实例主要利用图像切片方法，通过图像坐标变化实现滚动效果。

　　代码示例：

    
    


    
        您的浏览器不支持Canvas标签！