舍不得买2块钱的刮刮乐，就只能写个类似的功能过过彩票瘾了！
布局
<div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
<div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div>
<div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;">
<span>祝</span>
<span>君</span>
<span>中</span>
<span>奖</span>
</div>
<div id="canvasArea" style="width:300px;height:200px;position:relative;">
<div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:56px;color:indianred;">一等奖</div>
<canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
</div>
</div>Nach dem Login kopieren
这段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);Nach dem Login kopieren
刮奖功能函数
var brush=function(){//刮奖
context.clearRect(event.offsetX,event.offsetY,20,20);
};Nach dem Login kopieren
为canvas元素onmousedown和onmouseup事件
复制代码
canvas.onmousedown = function(){
// 鼠标按下时 - 绑定鼠标跟随事件
bindHandler(canvas,'mousemove',brush,false);
}
canvas.onmouseup = function(){
// 停止刮奖功能 - 解绑鼠标跟随事件
removeHandler(canvas,"mousemove",brush,false);
}Nach dem Login kopieren
复制代码
这里的事件绑定与解绑我上篇博文有封装，最后完整代码也有！
刮刮乐happy到底结束！最后附上完整代码，再看看效果吧！
demo二：画笔
布局
<div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
<canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas>
</div>Nach dem Login kopieren
设置canvas画布
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");Nach dem Login kopieren
画笔功能函数
var draw=function(){
context2.fillRect(event.offsetX,event.offsetY,10,10);
};Nach dem Login kopieren
为canvas元素onmousedown和onmouseup事件
context2.font='20px Arial';
context2.strokeText('NICK画笔',100,30);//写个头
//1. 为canvas元素onmousedown和onmouseup事件
canvas2.onmousedown = function(){
// 启用画笔功能 - 绑定鼠标跟随事件
bindHandler(canvas2,'mousemove',draw,false);
}
canvas2.onmouseup = function(){
// 停止画笔功能 - 解绑鼠标跟随事件
removeHandler(canvas2,"mousemove",draw,false);
}Nach dem Login kopieren
画图工具的画笔功能到底结束！
附上完整代码：
Canvas lottery brush nick
<div id="lottery" style="width:300px;height:500px;margin:10px;background-color:lightskyblue;border-radius:5px;float:left;">
<div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div>
<div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;">
<span>祝</span>
<span>君</span>
<span>中</span>
<span>奖</span>
</div>
<div id="canvasArea" style="width:300px;height:200px;position:relative;">
<div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:56px;color:indianred;">一等奖</div>
<canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
</div>
</div>
<div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
<canvas id="canvas2" width="300px" height="500px" style="background-color:lightblue;"></canvas>
</div>
刮刮乐：鼠标按住不放，拖动开始刮奖！
画笔：鼠标按住不放，拖动画画！
<script>
//插件方法封装区
;(function(){
// 事件绑定
window.bindHandler = (function() {
if (window.addEventListener) {// 标准浏览器
return function(elem, type, handler) {
// elem:节点 type:事件类型 handler:事件处理函数
// 最后一个参数为true:在捕获阶段调用事件处理程序;为false:在冒泡阶段调用事件处理程序。注意：ie没有这个参数
elem.addEventListener(type, handler, false);
}
} else if (window.attachEvent) {// IE浏览器
return function(elem, type, handler) {
elem.attachEvent("on" + type, handler);
}
}
}());
// 事件解除
window.removeHandler = (function() {
if (window.removeEventListener) {// 标准浏览器
return function(elem, type, handler) {
elem.removeEventListener(type, handler, false);
}
} else if (window.detachEvent) {// IE浏览器
return function(elem, type, handler) {
elem.detachEvent("on" + type, handler);
}
}
}());
}());
//命名区
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
var brush=function(){//刮奖
context.clearRect(event.offsetX,event.offsetY,20,20);
};
var draw=function(){//写字
context2.fillRect(event.offsetX,event.offsetY,10,10);
};
//功能实现区
//刮刮乐
// 1. 绘制刮奖区域
context.fillStyle='#A9AB9D';
context.fillRect(10,10,280,180);
context.fillStyle='#000';
context.font='50px Arial';
context.fillText('刮奖区',75,115);
//字体变色
setInterval(function(){
document.getElementById('txt').style.color = document.getElementById('txt').style.color=='peachpuff' ? 'yellow' : 'peachpuff';
},500);
//2. 为canvas元素onmousedown和onmouseup事件
canvas.onmousedown = function(){
// 鼠标按下时 - 绑定鼠标跟随事件
bindHandler(canvas,&#39;mousemove&#39;,brush,false);
}
canvas.onmouseup = function(){
// 停止刮奖功能 - 解绑鼠标跟随事件
removeHandler(canvas,"mousemove",brush,false);
}
//画笔
context2.font=&#39;20px Arial&#39;;
context2.strokeText(&#39;NICK画笔&#39;,100,30);//写个头
//1. 为canvas元素onmousedown和onmouseup事件
canvas2.onmousedown = function(){
// 启用画笔功能 - 绑定鼠标跟随事件
bindHandler(canvas2,&#39;mousemove&#39;,draw,false);
}
canvas2.onmouseup = function(){
// 停止画笔功能 - 解绑鼠标跟随事件
removeHandler(canvas2,"mousemove",draw,false);
}
</script>
Nach dem Login kopieren
