最近又被支付寶的集福字刷屏了
我到底還是沒看到敬業福ค(TㅅT) 心塞
今天給大家帶來行動端的刮刮樂實現
效果就是這樣的
手滑動觸發刮卡
當刮卡面積達到70%以上，自動刮除全部灰色圖層
程式碼不是很多
全部程式碼就這些
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no" name="viewport">
<title>Scrape</title>
<style>
#myCanvas {
background-repeat: no-repeat;
background-position: center;
background-size: 200px 200px;
}
</style></head><body>
<canvas id="myCanvas" width=300 height=300></canvas>
<script>
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
w = canvas.width;
h = canvas.height;
area = w * h;
l = canvas.offsetLeft;
t = canvas.offsetTop,
img = new Image();
var randomImg = function(){
var random = Math.random();
if(random < 0.4){
img.src = './1.png';
}else if(random > 0.6){
img.src = './2.png';
}else{
img.src = './award.jpg';
}
}; var bindEvent = function(){
canvas.addEventListener('touchmove', moveFunc, false);
canvas.addEventListener('touchend', endFunc, false);
}; var moveFunc = function(e){
var touch = e.touches[0],
posX = touch.clientX - l,
posY = touch.clientY - t;
ctx.beginPath();
ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0);
ctx.fill();
}; var endFunc = function(e){
var data = ctx.getImageData(0, 0, w, h).data,
scrapeNum = 0;
for(var i = 3, len = data.length; i < len; i += 4){
if(data[i] === 0){
scrapeNum++;
}
} if(scrapeNum > area * 0.7){
ctx.clearRect(0, 0, w, h);
canvas.removeEventListener('touchmove', moveFunc, false);
canvas.removeEventListener('touchend', endFunc, false);
}
} var init = (function(){
ctx.fillStyle = "#ccc";
ctx.fillRect(0, 0, w, h);
randomImg();
img.addEventListener('load', function(){
canvas.style.backgroundImage = 'url(' + img.src +')';
ctx.globalCompositeOperation = 'destination-out';
bindEvent();
});
})(); </script></body></html>下面我就簡單說明一下
首先在頁面中我們只需要一個canvas元素
<canvas id="myCanvas" width=300 height=300></canvas>
CSS中的我們需要對canvas的背景圖片事先設定好樣式
#myCanvas {
background-repeat: no-repeat;
background-position: center;
background-size: 200px 200px;}腳本中我們首先要宣告所需變數
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
w = canvas.width;
h = canvas.height;
area = w * h;
l = canvas.offsetLeft;
t = canvas.offsetTop,
img = new Image();取得canvas物件以及它的上下文物件
area變數是為下面的像素點偵測所準備
img用來進行圖片預先載入
最關鍵的函數在於init初始化函數
var init = (function(){
ctx.fillStyle = "#ccc";
ctx.fillRect(0, 0, w, h);
randomImg();
img.addEventListener('load', function(){
canvas.style.backgroundImage = 'url(' + img.src +')';
ctx.globalCompositeOperation = 'destination-out';
bindEvent();
});
})();流程如下：
將整個canvas覆寫灰色圖層
隨機圖片
圖片預先載入
載入完畢後，設定圖片為canvas背景
刮卡前，設定
ctx .globalCompositeOperation = 'destination-out';為canvas綁定監聽事件，塗卡
這個globalCompositeOperation才是刮刮樂的關鍵
關於這個屬性的用法可以戳這裡
var randomImg = function(){
var random = Math.random(); if(random < 0.4){
img.src = './1.png';
}else if(random > 0.6){
img.src = './2.png';
}else{
img.src = './award.jpg';
}
};randomImg函數的功能就是隨機圖片
隨機圖片就需要利用Math.random()隨機數字
#canvas我們需要綁定兩個函數
touchmove和touchend
var moveFunc = function(e){
var touch = e.touches[0],
posX = touch.clientX - l,
posY = touch.clientY - t;
ctx.beginPath();
ctx.arc(posX, posY, 15, 0, Math.PI * 2, 0);
ctx.fill();};滑動畫面就要畫一個圓
由於設定了destination-out ，所以產生了刮卡的效果
還要注意，每次觸發都要ctx.beginPath();
否則ctx.fill();會連接之前劃過的圓，大面積刮塗
var endFunc = function(e){
var data = ctx.getImageData(0, 0, w, h).data,
scrapeNum = 0;
for(var i = 3, len = data.length; i < len; i += 4){
if(data[i] === 0){
scrapeNum++;
}
} if(scrapeNum > area * 0.7){
ctx.clearRect(0, 0, w, h);
canvas.removeEventListener('touchmove', moveFunc, false);
canvas.removeEventListener('touchend', endFunc, false);
}
}手抬起時，就會觸發touchend
在這個函數中，我們利用了ctx.getImageData()取得了canvas的像素資訊
關於這個函數的用法可以戳這裡
當灰色圖層被刮開後，後面就是canvas的背景
所以我們可以透過判斷像素資訊RGBA中的A是否為0來判斷圖層是否被刮開
scrapeNum就代表被刮開的像素點
所以透過scrapeNum > area * 0.7的判斷
當刮開的範圍大於總範圍的70%時
清除整個灰色圖層
以上就是行動端Touch事件與H5-Canvas像素點偵測實作刮刮樂的內容，更多相關內容請關注PHP中文網（www.php.cn）！
Vue和Canvas：如何实现手写签名和手势识别功能Jul 18, 2023 am 08:49 AMVue和Canvas：如何实现手写签名和手势识别功能引言：手写签名和手势识别功能在现代应用程序中越来越常见，它们可以为用户提供更加直观和自然的交互方式。Vue.js作为一款流行的前端框架，搭配Canvas元素可以实现这两个功能。本文将介绍如何使用Vue.js和Canvas元素来实现手写签名和手势识别功能，并给出相应的代码示例。一、手写签名功能实现要实现手写签
如何利用Vue和Canvas创建逼真的天气动态背景Jul 17, 2023 am 08:33 AM如何利用Vue和Canvas创建逼真的天气动态背景引言：在现代网页设计中，动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Vue和Canvas技术来创建一个逼真的天气动态背景效果。通过代码示例，你将学习如何编写Vue组件和利用Canvas绘制不同天气场景，从而实现一个独特而吸引人的背景效果。步骤一：创建Vue项目首先，我们需要创建一个Vue项目。
Canvas的优势有哪些Aug 17, 2023 pm 04:52 PMcanvas的优势有强大的绘图功能、高性能、跨平台兼容性、支持多种图形格式、可以与其他Web技术集成、可以实现动态效果和可以实现复杂的图像处理。详细介绍：1、Canvas提供了丰富的绘图功能，可以绘制各种形状、线条、文本、图像等；2、Canvas在浏览器中直接操作像素，因此具有很高的性能；3、Canvas是基于HTML5标准的一部分，可以在各种现代浏览器上运行等等。
canvas插件有哪些Aug 17, 2023 pm 05:00 PMcanvas插件有Fabric.js、EaselJS、Konva.js、Three.js、Paper.js、Chart.js和Phaser。详细介绍：1、Fabric.js 是一个基于Canvas的开源 JavaScript 库，它提供了一些强大的功能；2、EaselJS是CreateJS库中的一个模块，它提供了一套简化了Canvas编程的API；3、Konva.js等等。
Vue和Canvas：如何实现视频播放器的定制化界面Jul 18, 2023 pm 02:49 PMVue和Canvas：如何实现视频播放器的定制化界面引言：在现代互联网时代，视频已经成为人们生活中必不可少的一部分。为了提供良好的用户体验，许多网站和应用程序都提供了自定义的视频播放器界面。本文将介绍如何使用Vue和Canvas技术实现一个定制化的视频播放器界面。一、前期准备在开始之前，您需要确保您已经安装了Vue和Canvas，并且熟悉这两种技术的基本用法
Vue和Canvas：如何实现图片的马赛克效果Jul 16, 2023 pm 10:17 PMVue和Canvas：如何实现图片的马赛克效果引言：随着Web技术的不断发展，越来越多的人开始使用Vue框架来构建交互式的前端应用。而在前端开发中，常常需要为用户提供图片处理的功能。本文将介绍如何利用Vue和Canvas实现图片的马赛克效果，为用户带来更好的视觉体验。一、马赛克效果概述马赛克效果是一种将图像的细节部分进行像素化处理，使得整个图像变得模糊和抽象
如何使用Vue和Canvas开发网页截图工具Jul 19, 2023 am 08:36 AM如何使用Vue和Canvas开发网页截图工具简介：随着互联网的发展，网页截图工具在我们的日常生活中扮演着越来越重要的角色。它们可以用来捕捉网页上的信息、制作教程或者分享你的见解。本文将介绍如何使用Vue和Canvas来开发一个简单的网页截图工具，以帮助读者了解如何实现这个常见但又有趣的功能。准备工作：在开始之前，我们需要准备好以下的开发环境和工具：安装Nod
canvas引擎有哪些Aug 17, 2023 pm 05:29 PMcanvas引擎有Three.js、Pixi.js、EaselJS、Konva.js、Paper.js等。详细介绍：1、Pixi.js，提供了简单易用的API，支持精灵、纹理、滤镜等功能，同时还提供了丰富的工具和插件，方便开发者进行交互、动画和优化等操作；2、Pixi.js，提供了简单易用的API，支持精灵、纹理、滤镜等功能，还提供了丰富的工具和插件；3、EaselJS等等。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3漢化版
中文版，非常好用
WebStorm Mac版
好用的JavaScript開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
SublimeText3 Linux新版
SublimeText3 Linux最新版
