这周有点迷茫，不知道干嘛了，一天天就过去了！我在博客右侧公告栏加了qq交流，各位有好的主题，或者有趣的技术，欢迎交流！今天突发奇想，就写了2个h5 canvas的demo玩玩！

demo一：刮刮乐

　　舍不得买2块钱的刮刮乐，就只能写个类似的功能过过彩票瘾了！

布局

NICK彩票祝君中奖一等奖

这段html要注意的地方有2个：

flex布局，将‘祝君中奖’垂直居中，目前还有兼容问题，不过看我们大前端的发展趋势，应该很快就能搞定了；

canvas和‘一等奖’div的z-index问题，将canvas的z-index设置较高，使其置于一等奖div上面。

设置canvas画布

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

绘制刮奖区域

context.fillStyle='#A9AB9D'; context.fillRect(10,10,280,180); context.fillStyle='#000'; context.font='50px Arial'; context.fillText('刮奖区',75,115);

以上都是canvas基础api，看w3c就ok了。

为了好看，我将‘祝君中奖’加个字体变色

setInterval(function(){ document.getElementById('txt').style.color = document.getElementById('txt').style.color=='peachpuff' ? 'yellow' : 'peachpuff'; },500);

刮奖功能函数

var brush=function(){//刮奖 context.clearRect(event.offsetX,event.offsetY,20,20); };

为canvas元素onmousedown和onmouseup事件

canvas.onmousedown = function(){ // 鼠标按下时 - 绑定鼠标跟随事件 bindHandler(canvas,'mousemove',brush,false); } canvas.onmouseup = function(){ // 停止刮奖功能 - 解绑鼠标跟随事件 removeHandler(canvas,"mousemove",brush,false); }

这里的事件绑定与解绑我上篇博文有封装，最后完整代码也有！

刮刮乐happy到底结束！最后附上完整代码，再看看效果吧！

demo二：画笔 布局

设置canvas画布

var canvas2 = document.getElementById("canvas2"); var context2 = canvas2.getContext("2d");

画笔功能函数

var draw=function(){ context2.fillRect(event.offsetX,event.offsetY,10,10); };

为canvas元素onmousedown和onmouseup事件

context2.font='20px Arial'; context2.strokeText('NICK画笔',100,30);canvas2.onmousedown = function(){ // 启用画笔功能 - 绑定鼠标跟随事件 bindHandler(canvas2,'mousemove',draw,false); } canvas2.onmouseup = function(){ // 停止画笔功能 - 解绑鼠标跟随事件 removeHandler(canvas2,"mousemove",draw,false); }

画图工具的画笔功能到底结束！

附上完整代码：

Canvas lottery brush nickNICK彩票祝君中奖一等奖刮刮乐：鼠标按住不放，拖动开始刮奖！画笔：鼠标按住不放，拖动画画！ ;(function(){ () { (elem, type, handler) { ); } } (elem, type, handler) { elem.attachEvent( type, handler); } } }()); () { (elem, type, handler) { elem.removeEventListener(type, handler, false); } } (elem, type, handler) { elem.detachEvent( type, handler); } } }()); }()); ); ); ); ); ); }; ); }; ; context.fillRect(); context.fillStyle; context.font; context.fillText(); (){ document.getElementById(; },500); (){ ); } canvas.onmouseup = function(){ ); } ; context2.strokeText((){ ); } canvas2.onmouseup = function(){ ); }

View Code

　　代码写完了，我也想说点其他的：

　　上面js代码中，有不少注释，我将其分为几个区域：插件方法封装区、命名区、功能实现区、刮刮乐区以及画笔区等，我感觉这样写加上一些注释，能使代码能加简洁，便于以后的维护！当然这只是个人观点，欢迎各位点击我博客右边公告栏的qq交流交流！

最后附上：

上篇博文：事件绑定与解绑！（只是一个简单的封装）

来看看效果，玩玩吧！