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

要实现刮奖效果，最重要的是要找到一种方法：当刮开上层的涂层是就能看到下层的结果。而HTML5的canvas API中有一个属性globalCompositeOperation，这个属性有多个值，而实现刮奖效果要用到的值就是destination-out。意思就是：在已有内容和新图形不重叠的地方 ...

近年来由于移动设备对HTML5的较好支持，经常有活动用刮奖的效果，最近也在看H5方面的内容，就自己实现了一个，现分享出来跟大家交流。 1、效果 2、原理 原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个 ...

　　今天有看到一个园友发了一篇自己实现的刮刮了，感觉挺好玩的就下下来看看，结果运行不了，想想也不是太难就决定自己实现一个，还是花了点时间的，源码下载链接在最下面（这个绝对有用，除非你的浏览器不支持canvas）。废话不多说，讲解一下几个重要的点吧： 一、首先是刮刮卡的效果，很自然想到两层 ...

............. 　　 　　想必大家都玩过刮刮乐，下面就介绍一种刮刮乐的移动端实现方式！用到canvas 1、用 ...

<template> <!--游玩区域--> <div class="panel"> <canvas id="canvas" ...

前言 HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。 wScratch是一个模拟刮刮卡的jQuery插件，可以设置刮开纯色或者图像。 演示 显示刮卡百分比 到达一定百分比清空 ...

效果体验：http://keleyi.com/a/bjad/uaq24pxt.htm其中拖拽刮涂层效果使用jquery UI的draggable方法，请参考：http://keleyi.com/a/bjac/9dd21532ed1dbf23.htm以下是源代码： web前端 ...