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

首页

web前端

html教程

canvas刮刮乐和画笔

高洛峰

Nov 04, 2016 pm 05:26 PM

canvas h5

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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7475

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

canvas箭头插件有哪些 Aug 21, 2023 pm 02:14 PM

canvas箭头插件有：1、Fabric.js，具有简单易用的API，可以创建自定义箭头效果；2、Konva.js，提供了绘制箭头的功能，可以创建各种箭头样式；3、Pixi.js，提供了丰富的图形处理功能，可以实现各种箭头效果；4、Two.js，可以轻松地创建和控制箭头的样式和动画；5、Arrow.js，可以创建各种箭头效果；6、Rough.js，可以创建手绘效果的箭头等。

html2canvas有哪些版本 Aug 22, 2023 pm 05:58 PM

html2canvas的版本有html2canvas v0.x、html2canvas v1.x等。详细介绍：1、html2canvas v0.x，这是html2canvas的早期版本，目前最新的稳定版本是v0.5.0-alpha1。它是一个成熟的版本，已经被广泛使用，并且在许多项目中得到了验证；2、html2canvas v1.x，这是html2canvas的新版本。

canvas时钟有哪些细节 Aug 21, 2023 pm 05:07 PM

canvas时钟的细节有时钟外观、刻度线、数字时钟、时针、分针和秒针、中心点、动画效果、其他样式等。详细介绍：1、时钟外观，可以使用Canvas绘制一个圆形表盘作为时钟的外观，可以设置表盘的大小、颜色、边框等样式；2、刻度线，在表盘上绘制刻度线，表示小时或分钟的位置；3、数字时钟，可以在表盘上绘制数字时钟，表示当前的小时和分钟；4、时针、分针和秒针等等。

tkinter canvas有哪些属性 Aug 21, 2023 pm 05:46 PM

tkinter canvas属性有bg、bd、relief、width、height、cursor、highlightbackground、highlightcolor、highlightthickness、insertbackground、insertwidth、selectbackground、selectforeground、xscrollcommand属性等等。详细介绍

uniapp实现如何使用canvas绘制图表和动画效果 Oct 18, 2023 am 10:42 AM

uniapp实现如何使用canvas绘制图表和动画效果，需要具体代码示例一、引言随着移动设备的普及，越来越多的应用程序需要在移动端展示各种图表和动画效果。而uniapp作为一款基于Vue.js的跨平台开发框架，提供了使用canvas绘制图表和动画效果的能力。本文将介绍uniapp如何使用canvas来实现图表和动画效果，并给出具体的代码示例。二、canvas

学习canvas框架详解常用的canvas框架 Jan 17, 2024 am 11:03 AM

探索Canvas框架：了解常用的Canvas框架有哪些，需要具体代码示例引言：Canvas是HTML5中提供的一个绘图API，通过它我们可以实现丰富的图形和动画效果。为了提高绘图的效率和便捷性，许多开发者开发了不同的Canvas框架。本文将介绍一些常用的Canvas框架，并提供具体代码示例，以帮助读者更深入地了解这些框架的使用方法。一、EaselJS框架Ea

h5如何使用position Dec 26, 2023 pm 01:39 PM

在H5中使用position属性可以通过CSS来控制元素的定位方式：1、相对定位relative，语法为“style="position: relative;”；2、绝对定位absolute，语法为“style="position: absolute;”；3、固定定位fixed，语法为“style="position: fixed;”等等。