canvas刮刮乐和画笔-html教程-PHP中文网

首页

web前端

html教程

canvas刮刮乐和画笔

高洛峰

Nov 04, 2016 pm 05:26 PM

canvash5

舍不得买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>

这段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(&#39;txt&#39;).style.color = 
            document.getElementById(&#39;txt&#39;).style.color==&#39;
            peachpuff&#39; ? &#39;yellow&#39; : &#39;peachpuff&#39;;
        },500);

刮奖功能函数

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

为canvas元素onmousedown和onmouseup事件

复制代码

        canvas.onmousedown = function(){
            // 鼠标按下时 - 绑定鼠标跟随事件
            bindHandler(canvas,&#39;mousemove&#39;,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=&#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);
        }

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

附上完整代码：



 
  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(&quot;canvas2&quot;);
        var context2 = canvas2.getContext(&quot;2d&quot;);
        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=&#39;#A9AB9D&#39;;
        context.fillRect(10,10,280,180);
        context.fillStyle=&#39;#000&#39;;
        context.font=&#39;50px Arial&#39;;
        context.fillText(&#39;刮奖区&#39;,75,115);
        //字体变色
        setInterval(function(){
            document.getElementById(&#39;txt&#39;).style.color = document.getElementById(&#39;txt&#39;).style.color==&#39;peachpuff&#39; ? &#39;yellow&#39; : &#39;peachpuff&#39;;
        },500);
        //2. 为canvas元素onmousedown和onmouseup事件
        canvas.onmousedown = function(){
            // 鼠标按下时 - 绑定鼠标跟随事件
            bindHandler(canvas,&amp;#39;mousemove&amp;#39;,brush,false);
        }
        canvas.onmouseup = function(){
            // 停止刮奖功能 - 解绑鼠标跟随事件
            removeHandler(canvas,&quot;mousemove&quot;,brush,false);
        }

        //画笔
        context2.font=&amp;#39;20px Arial&amp;#39;;
        context2.strokeText(&amp;#39;NICK画笔&amp;#39;,100,30);//写个头
        //1. 为canvas元素onmousedown和onmouseup事件
        canvas2.onmousedown = function(){
            // 启用画笔功能 - 绑定鼠标跟随事件
            bindHandler(canvas2,&amp;#39;mousemove&amp;#39;,draw,false);
        }
        canvas2.onmouseup = function(){
            // 停止画笔功能 - 解绑鼠标跟随事件
            removeHandler(canvas2,&quot;mousemove&quot;,draw,false);
        }
    </script>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。