一 、前言

一直在做PC端的前端开发，从互联网到行业软件。最近发现移动端已经成为前端必备技能了，真是不能停止学习。HTML5新增的一些东西，canvas是用的比较多也比较复杂的一个，简单的入门了一下，通过一个刮奖效果来学习。

二、canvas基础

本文的目标是做一个刮奖效果，但是如果都不知道canvas是怎么回事，那么肯定也无法进行下去，所以先讲讲canvas基础吧。

首先，该怎么理解canvas，思来想去，最好的理解办法应该就是把canvas理解为一个空白的画纸，一张你可以在上面画画的纸。

然后，你通过HTML标签定义canvas，例如：

<canvas id="canvas" width="200" height="200">你的浏览器不支持canvas</canvas>

这样，你就设置好了一张200×200的画纸了。

这里要注意的是，canvas元素的宽高需要直接写在标签上或者通过js来设置。如果用css设置，那么浏览器会理解为把这张纸缩放成你设置的宽高。跟预期还是不一样的。

然后，有了纸第二步就是画东西了，画东西需要的就是笔了。得到画笔：

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

这样，就有了这只笔了，叫ctx。

然后就是绘画，这里要重点说明的是，canvas画东西需要两步

  • 第一步：告诉系统你要画的东西的路径
  • 第二步：告诉系统你需要用哪种方式填充路径

简单来说，你画一条直线，那么代码应该是告诉系统我要从0,0点到100,100点设置一条路径，然后用黑色描边这条路径。

用代码来描述我上面的那句话：

ctx.beginPath();    // 开始画路径

ctx.moveTo(0, 0);    // 移动到0,0点

ctx.lineTo(100, 100);    // 画条直线到100,100点

ctx.closePath();    // 闭合路径

ctx.lineWidth = "5";    // 设置线宽5px

// 至此路径描述已经结束

ctx.strokeStyle = "#000";    // 设置描边颜色为黑色

ctx.stroke();    // 执行描边

上面代码就可以画一条直线了。当然，canvas能做的远远不止这些。

因为是基础嘛，所以canvas就讲到这里啦。关于canvas的东西太多，但原理基本都是这样，当然除了描边，还有填充（fill），填充各种形状（fillRect），画图形（drawImage）等。系统学习canvas确实需要一本书或者一系列教程，因为我也是刚学，就不误人子弟啦。这些基础其实也够理解下面的例子啦。

三、刮奖效果

最简单的一个刮奖效果原理大概就是这样，放一张底图（或者是文字，例如谢谢惠顾呀），然后再它之上覆盖一个canvas，遮住这张图，接着绑定touchstart（mousedown），touchmove（mousemove），touchend事件。然后移动的时候用“透明”填充canvas，那么被canvas遮住的部分就会呈现出来了。

直接看代码吧，最简单的实现

 <!DOCTYPE html>

 <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->

 <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->

 <!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->

 <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>刮奖</title>

     <meta name="description" content="刮奖">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <style>

         body{margin: 0;}

         #price{width: 200px; height: 100px; font-size: 40px; color: #f60; line-height: 100px; text-align: center;}

         #canvas{position: absolute; top: 0; left: 0;}

     </style>

 </head>

 <body>

     <div id="price">谢谢惠顾</div>

     <canvas id="canvas" width="200" height="100">你的浏览器不支持canvas</canvas>

     <script>

         // 得到画笔

         var cvs = document.getElementById("canvas"),

             ctx = cvs.getContext("2d"),

             touchRadius = 5;    // 默认手指触摸半径，可以自定义设置

         // 默认填充灰色来遮住文字

         ctx.fillStyle = "#ccc";

         ctx.fillRect(0, 0, 200, 100);    // fillRect，用矩形填充

         // 画园的方法

         // @param { integer } 圆心的x坐标

         // @param { integer } 圆心的y坐标

         // @param { integer } 圆心半径

         // @param { string } 填充的颜色（本例中会通过其余代码设置为‘透明’，所以这个设置可以忽略）

         var fillCircle = function (x, y, radius, fillColor) {

             this.fillStyle = fillColor || "#eee";

             this.beginPath();

             this.moveTo(x, y);

             this.arc(x, y, radius, 0, Math.PI * 2, false);    // 标准画圆

             this.fill();

         };

         // 得到涂抹的百分比（此处参考了部分他人代码，出处http://www.cnblogs.com/jscode/p/3580878.html）

         var getTransparentPercent = function (ctx, width, height) {

             var imgData = ctx.getImageData(0, 0, width, height),    // 得到canvas的像素信息

                 pixles = imgData.data,

                 transPixs = [];

             for (var i = 0, j = pixles.length; i < j; i += 4) {    // 因为存储的结构为[R, G, B, A]，所以要每次跳4个长度

                 var a = pixles[i + 3];    // 拿到存储alpha通道的值

                 if (a === 0) {    // alpha通道为0，就代表透明

                     transPixs.push(i);

                 }

             }

             return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);

         }

         // 绑定事件（此处参考了部分他人代码，出处http://www.cnblogs.com/jscode/p/3580878.html）

         // 需要判断是PC还是手机

         var device = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()),

             clickEvtName = device ? 'touchstart' : 'mousedown',

             moveEvtName = device ? 'touchmove' : 'mousemove';

         // 判断是不是开始触摸等

         if (!device) {

             var isMouseDown = false;

             document.addEventListener('mouseup', function (e) {

                 isMouseDown = false;

             }, false);

         } else {

             document.addEventListener("touchmove", function (e) {

                 if (isMouseDown) {

                     e.preventDefault();

                 }

             }, false);

             document.addEventListener('touchend', function (e) {

                 isMouseDown = false;

             }, false);

         }

         // 开始移动

         cvs.addEventListener(clickEvtName, function (e) {

             isMouseDown = true;

             var x = (device ? e.touches[0].clientX : e.clientX);

             var y = (device ? e.touches[0].clientY : e.clientY);

             ctx.globalCompositeOperation = 'destination-out';    // 关键部分，描述当在canvas上再次绘画时候的情况，这个设置便是之前所说的透明

             fillCircle.call(ctx, x, y, touchRadius);

             console.log("当前涂抹比例为：" + getTransparentPercent(ctx, 200, 100));

         }, false);

         // 移动中

         cvs.addEventListener(moveEvtName, function (e) {

             if (!device && !isMouseDown) {

                 return false;

             }

             var x = (device ? e.touches[0].clientX : e.clientX);

             var y = (device ? e.touches[0].clientY : e.clientY);

             ctx.globalCompositeOperation = 'destination-out';

             fillCircle.call(ctx, x, y, touchRadius);

             console.log("当前涂抹比例为：" + getTransparentPercent(ctx, 200, 100));

         }, false);

     </script>

 </body>

 </html>

上面的代码完全是按照顺序来写的，所以应该很容易看懂的吧。其中关键的就是设置透明，还有就是设备的判断。

Update：增加了一个判断刮开了多少比例的代码，因为实际需求很可能是刮开多少就告诉用户刮奖结束。这里，因为刮开的部分是“透明的”，在代码中就是说RGBA颜色值中的A是透明的，通过getImageData方法可以得到每个像素点的RGBA值，然后计算一下比例即可。在控制台可以看到刮开的比例数据。

至此，也算是用canva完成了第一个小效果了。

转载本站文章请注明作者和出处 奇葩一朵朵 – http://www.cnblogs.com/season-huang/ ，请勿用于任何商业用途

简单入门canvas - 通过刮奖效果来学习的更多相关文章

  1. HTML5 Canvas实战之刮奖效果

    近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...

  2. HTML5实现刮奖效果

    原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...

  3. 使用MDScratchImageView实现刮奖效果

    使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // ...

  4. canvas写的一个刮奖效果

    <!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X ...

  5. canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. HTML5 Canvas实战之刮奖效果【转】

    开源项目地址:https://github.com/artwl/Lottery 作者博客地址:http://www.cnblogs.com/jscode/p/3580878.html 谢谢浏览!

  7. 使用PorterDuffXfermode画出刮刮奖效果p146-p148

    package com.zzw.Qunyinzghuan3; import android.content.Context; import android.graphics.Bitmap; impor ...

  8. 使用HTML5实现刮刮卡效果

    你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...

  9. canvas 绘制刮刮卡

    思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...

随机推荐

  1. 微信企业号 获取AccessToken

    目录 1. AccessToken介绍 2. 示例代码 1. AccessToken介绍 1.1 什么是AccessToken AccessToken即访问凭证,业务服务器每次主动调用企业号接口时需要 ...

  2. Android SwipeRefreshLayout 下拉刷新——Hi_博客 Android App 开发笔记

    以前写下拉刷新 感觉好费劲,要判断ListView是否滚到顶部,还要加载头布局,还要控制 头布局的状态,等等一大堆.感觉麻烦死了.今天学习了SwipeRefreshLayout 的用法,来分享一下,有 ...

  3. nodejs模块发布及命令行程序开发

    前置技能 npm工具为nodejs提供了一个模块和管理程序模块依赖的机制,当我们希望把模块贡献出去给他人使用时,可以把我们的程序发布到npm提供的公共仓库中,为了方便模块的管理,npm规定要使用一个叫 ...

  4. C#发送邮箱

    之前自己从来没有做过发送邮箱的功能,前段时间项目需要,在找了很多帖子之后,终于实现了. 之后有整理了一下,写了一个类.直接给类传递信息,就可以发送了. 这里还需要说明的是,发送邮箱需要开通POP3/S ...

  5. [WPF] Wait for a moment.

    一.控件介绍 在 WPF 中使用的等待控件,控件包括三种,普通的等待信息提示(WaitTip),进度条提示(WaitProgress),以及主程序覆盖的模拟时钟等待窗口(WaitClock),具体效果 ...

  6. 看图理解JWT如何用于单点登录

    单点登录是我比较喜欢的一个技术解决方案,一方面他能够提高产品使用的便利性,另一方面他分离了各个应用都需要的登录服务,对性能以及工作量都有好处.自从上次研究过JWT如何应用于会话管理,加之以前的项目中也 ...

  7. 【从零开始学BPM，Day3】自定义表单开发

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第三天课程] 1.课程概要 Step 1 软件下载:H3 BP ...

  8. Android Studio —— 创建Menu菜单项

    大多数android程序的右上角都会设置一个菜单按钮比如微信的界面右上角的加号. 这个需要在layout同级目录下新建文件夹命名为menu,再右击新建的menu新建xml文件:

  9. CentOS 7 修改主机名

    今天在阿里云上买了一个centos7的服务器,连接上以后,发现一个很长很长的主机名,看着让人很是不爽,就想着怎样将其改成一个有个性的名字. 这里我想说的是,在centos7 版本的linux系统上和c ...

  10. Linux根文件系统分析之init和busybox

    Hi,大家好!我是CrazyCatJack.今天给大家讲解Linux根文件系统的init进程和busybox的配置及编译. 先简单介绍一下,作为一个嵌入式系统,要想在硬件上正常使用的话.它的软件组成大 ...