一 、前言 一直在做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前端 ...