canvas刮刮乐和画笔

布局

<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>

这段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二：画笔

布局

     <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>

设置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);//写个头
        //1. 为canvas元素onmousedown和onmouseup事件
        canvas2.onmousedown = function(){
            // 启用画笔功能 - 绑定鼠标跟随事件
            bindHandler(canvas2,'mousemove',draw,false);
        }
        canvas2.onmouseup = function(){
            // 停止画笔功能 - 解绑鼠标跟随事件
            removeHandler(canvas2,"mousemove",draw,false);
        }

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

附上完整代码：

 
  <title>Canvas lottery brush nick</title>
  <meta charset="utf-8">
 
 
 <div style="width:640px;margin:auto;">
     <!--刮刮乐-->
     <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>
 </div>
 <div style="text-align:center;">
     <p>刮刮乐：鼠标按住不放，拖动开始刮奖！</p>
     <p>画笔：鼠标按住不放，拖动画画！</p>
 </div>