用HTML5的＜canvas＞元素实现刮刮乐游戏
用HTML5的＜canvas＞元素实现刮刮乐游戏
用HTML5的<canvas>元素实现刮刮乐，要求：将上面的“图层”的图像可用鼠标刮去，露出下面的“图层”的图像。
示例从简单到复杂。
简单示例
准备两张图像，我这里上面的图像top_image.png，下面的图像bottom_image.png，如下图：
我这里为方便 ，经图片和源码文件放在同一个文件夹中。
先看用一个canvas元素实现刮刮乐，源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>刮刮乐（Scratch Card）</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0; /* 背景色 */}canvas {background-image: url('bottom_image.png'); /* 底层图片 */background-size: cover;}</style>
</head>
<body><canvas id="canvas" width="356" height="358"></canvas><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");// 加载上层图片（可被刮去的图层）var img = new Image();img.src = "top_image.png"; // 上层图片路径img.onload = function() {ctx.drawImage(img, 0, 0, canvas.width, canvas.height);};// 标记是否按下鼠标（开始刮卡）var isDown = false;// 鼠标按下事件canvas.addEventListener('mousedown', function() {isDown = true;// 切换到“擦除”模式ctx.globalCompositeOperation = 'destination-out';});// 鼠标松开事件canvas.addEventListener('mouseup', function() {isDown = false;});// 鼠标移动事件canvas.addEventListener('mousemove', function(event) {if (isDown) {let x = event.offsetX;let y = event.offsetY;// 绘制擦除效果ctx.beginPath();ctx.arc(x, y, 20, 0, Math.PI * 2, false); // 使用圆形笔触ctx.fill();ctx.closePath();}});</script>
</body>
</html>
下面用两个canvas元素实现刮刮乐，底层图片和上层图片各用一个canvas元素，效果和上面的一样。实现的源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>刮刮乐（Scratch Card）2</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;}#container {position: relative;width: 356px;height: 358px;}canvas {position: absolute;top: 0;left: 0;}</style>
</head>
<body><div id="container"><canvas id="bottomCanvas" width="356" height="358"></canvas> <!-- 底层Canvas --><canvas id="topCanvas" width="356" height="358"></canvas> <!-- 上层Canvas --></div><script>document.addEventListener('DOMContentLoaded', function() {var bottomCanvas = document.getElementById('bottomCanvas');var topCanvas = document.getElementById('topCanvas');var bottomCtx = bottomCanvas.getContext('2d');var topCtx = topCanvas.getContext('2d');// 加载底层图片var bottomImage = new Image();bottomImage.src = 'bottom_image.png'; // 底层图片路径bottomImage.onload = function() {bottomCtx.drawImage(bottomImage, 0, 0, bottomCanvas.width, bottomCanvas.height);};// 加载上层图片var topImage = new Image();topImage.src = 'top_image.png'; // 上层图片路径topImage.onload = function() {topCtx.drawImage(topImage, 0, 0, topCanvas.width, topCanvas.height);};var isDown = false;// 鼠标按下事件topCanvas.addEventListener('mousedown', function() {isDown = true;topCtx.globalCompositeOperation = 'destination-out';});// 鼠标松开事件topCanvas.addEventListener('mouseup', function() {isDown = false;});// 鼠标移动事件topCanvas.addEventListener('mousemove', function(event) {if (!isDown) return;var x = event.offsetX;var y = event.offsetY;// 绘制擦除效果topCtx.beginPath();topCtx.arc(x, y, 20, 0, Math.PI * 2, false); // 使用圆形笔触topCtx.fill();topCtx.closePath();});});</script>
</body>
</html>
复杂示例
下面是改进，从列表框（下拉框）选择图片刮刮乐，增加了游戏的趣味性。
先给出效果
项目（project）的目录结构如下：
我这里游戏图片：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>刮刮乐（Scratch Card）3</title><style>div{ margin:20px;text-align:center;}* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;}#container {position: relative;width: 356px;height: 358px;}canvas {position: absolute;top: 0;left: 0;}</style>
</head>
<body><div> 选择游戏图片<select id="mySelect" onchange="loadImages()"> <!-- 添加 onchange 事件 --><option value="1">1</option> <!-- 更改 value 以匹配图像名称 --><option value="2">2</option><option value="3">3</option></select><div><div id="container"><canvas id="bottomCanvas" width="356" height="358"></canvas> <!-- 底层Canvas --><canvas id="topCanvas" width="356" height="358"></canvas> <!-- 上层Canvas --></div><script>function loadImages() {var selectElement = document.getElementById('mySelect');var selectedValue = selectElement.options[selectElement.selectedIndex].value;var bottomCanvas = document.getElementById('bottomCanvas');var topCanvas = document.getElementById('topCanvas');var bottomCtx = bottomCanvas.getContext('2d');var topCtx = topCanvas.getContext('2d');// 清除画布bottomCtx.clearRect(0, 0, bottomCanvas.width, bottomCanvas.height);topCtx.clearRect(0, 0, topCanvas.width, topCanvas.height);// 加载底层图片var bottomImage = new Image();bottomImage.src = 'img/bottom' + selectedValue + '.png';bottomImage.onload = function() {bottomCtx.drawImage(bottomImage, 0, 0, bottomCanvas.width, bottomCanvas.height);};// 重新加载并绘制上层图片var topImage = new Image();topImage.src = 'img/top' + selectedValue + '.png'; // 确保这里的路径正确匹配你的图片路径和命名topImage.onload = function() {topCtx.globalCompositeOperation = 'source-over'; // 重置合成操作为默认值topCtx.drawImage(topImage, 0, 0, topCanvas.width, topCanvas.height);// 确保刮刮效果重新应用addScratchEffect(topCanvas, topCtx);};}function addScratchEffect(canvas, ctx) {var isDown = false;// 移除之前可能添加的事件监听器canvas.onmousedown = null;canvas.onmouseup = null;canvas.onmousemove = null;// 鼠标按下事件canvas.onmousedown = function() {isDown = true;ctx.globalCompositeOperation = 'destination-out'; // 设置合成操作以实现刮效果};// 鼠标松开事件canvas.onmouseup = function() {isDown = false;};// 鼠标移动事件canvas.onmousemove = function(event) {if (!isDown) return;var x = event.offsetX;var y = event.offsetY;// 绘制擦除效果ctx.beginPath();ctx.arc(x, y, 20, 0, Math.PI * 2); // 使用圆形笔触ctx.fill();};}// 页面加载完毕后初始化画布document.addEventListener('DOMContentLoaded', function() {loadImages(); // 页面加载时也加载图片});</script>
</body>
</html>
本文是对https://blog.csdn.net/cnds123/article/details/112392014 例子的补充
关于HTML5中，使用<select>元素创建一个列表框（下拉框），并使用JavaScript来操作，可参见https://blog.csdn.net/cnds123/article/details/128353007
相关文章：
用HTML5的＜canvas＞元素实现刮刮乐游戏
用HTML5的＜canvas＞元素实现刮刮乐游戏 用HTML5的<canvas>元素实现刮刮乐，要求：将上面的“图层”的图像可用鼠标刮去，露出下面的“图层”的图像。 示例从简单到复杂。 简单示例 准备两张图像，我这…...
TypeScript + react 中 TypeScript 的加入后 , 有哪些优化项目
在使用 TypeScript 结合 React 进行开发时，TypeScript 提供了许多优化和增强代码质量的方式。以下是一些关键的优化操作和最佳实践： 强类型组件属性（Props）和状态（State）: 使用接口或类型别名定义组件的 pr…...
)
Redis学习路径(构建体系)
学习路径 掌握数据类型（分析底层数据结构）和缓存的基本使用 (理论使用) 掌握 redis 实现高性能，高可靠、高可用技术 （理论）学习redis源代码底层实现 (底层实现) 先来一个引言，比较宏观的角度…...
【README 小技巧】 展示gitee中开源项目start
【README 小技巧】 展示gitee中开源项目start <a target"_blank" hrefhttps://gitee.com/wujiawei1207537021/wu-framework-parent><img srchttps://gitee.com/wujiawei1207537021/wu-framework-parent/badge/star.svg altGitee star/></a>...
tcping实用小工具
Tcping实用小工具命令详解 一、tcping介绍 tcping：tcping命令基于tcp协议监控，可以从较低级别的协议获得简单的，可能不可靠的数据报服务。 原则上，TCP应该能够在从容硬线连接到分组交换或电路交换网络的各种通信系统之上操作。 …...
【Web】Java反序列化之CC2——commons-collections4的新链之一
目录 关于commons-collections4 一个重要的思维模型 触发Transform的关键类：TransformingComparator 反序列化的入口：PriorityQueue Exp 关于commons-collections4 commons-collections4 是 Apache Commons 组件库中的一个项目，它是对旧…...
golang使用gorm操作mysql1
1.mysql连接配置 package daoimport ("fmt""gorm.io/driver/mysql""gorm.io/gorm""gorm.io/gorm/logger" )var DB *gorm.DB// 连接数据库，启动服务的时候，init方法就会执行 func init() {username : "roo…...
Flutter异常上报及性能监控实现
1. 页面异常监测 在Flutter中，通常用FlutterError监测Flutter框架抛出的异常，用runZonedGuarded监测应用中用户代码异常。 class AppGuarded {run(Widget app) {//1. 用FlutterError监测flutter框架抛出的异常FlutterError.onError (FlutterErrorDetail…...
基于springboot+vue的工厂车间管理系统
博主主页：猫头鹰源码 博主简介：Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战，欢迎高校老师\讲师\同行交流合作 主要内容：毕业设计(Javaweb项目|小程序|Pyt…...
Java基础 - Stream 流：Stream API的终端操作
在前两篇博客中，我介绍了构建 Stream 流的多种方式，以及 Stream API 的中间操作，如果你还没有阅读，你可以点击这里和这里查看。 Java基础 - Stream 流：构建流的多种方式 Java基础 - Stream 流：Stream API…...
高级语言期末2009级A卷（计算机学院）
1.编写函数，打印下列序列0，1，1，2，3，5，8，13，21，34...(斐波那契序列)的前n项 #include <stdio.h>int main() {int x0,y1,z,n;scanf("%d",&…...
docker-compose搭建php开发环境
Docker Compose简介 Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您可以使用 YML 文件来配置应用程序需要的所有服务。然后使用一个命令，就可以从 YML 文件配置中创建并启动所有服务。而DockerCompose作为一种容器编排工具&…...
翻译论文：Beating Floating Point at its Own Game: Posit Arithmetic（一）
仅作记录学习使用，侵删 原文Beating Floating Point at its Own Game: Posit Arithmetic 参考翻译Posit: 替换IEE754的新方式 | SIGARCH 摘要 IEEE标准754浮点数（浮点数）的直接接点替换 Posit的优势 不需要区间算术或可变大小操作数 如…...
【数据结构-图论】并查集
并查集（Union-Find）是一种数据结构，它提供了处理一些不交集的合并及查询问题的高效方法。并查集主要支持两种操作： 查找（Find）：确定某个元素属于哪个子集，这通常意味着找到该子集的…...
云计算时代的运维： 职业发展方向与岗位选择
✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua，在这里我会分享我的知识和经验。&#x…...
java锁底层概述
Java中的锁是并发编程中核心的同步机制之一，用于控制多个线程对共享资源的访问，以保证数据的一致性和完整性。Java锁的底层实现依赖于操作系统的原生线程模型和Java虚拟机（JVM）的实现。这里主要讨论两种常见的锁：synch…...
win10如何添加指纹登陆
1、首先进入设置,进入下一个设置页面 2、在下一个设置页面内,我们直接使用右上角的搜索框,输入“指纹/finger”进行搜索。回车之后进入设置指纹登陆选项 3、设置指纹登陆的前期是设置好你的密码和pin码(先要设定登录密码和pin码),这里pin和密码都可以直接登陆我们的win10,设…...
足底筋膜炎的症状及治疗
足底筋膜炎症状：足底筋膜炎通常表现为足跟部疼痛，尤其是在晨起或长时间站立、行走后加重。疼痛可能向足底前部或足弓处放射，严重时可能影响行走。此外，患者还可能出现足跟部肿胀、皮肤温度升高、局部压痛等症状。 足底筋膜炎治疗方…...
udp丢包问题研究
//发现udp 有收不到数据包现象. 一: 观察丢包 1. ifconfig enp8s0 2. netstat -s -u 二: 修改系统缓存参数. recv_buffer_size 修改系统buffer_size sysctl -w net.core.rmem_max26214400 sysctl -w net.core.rmem_default26214400 三: 应用程序考虑 av_dict_set(&m_o…...
在idea中用模板骨架初始创建maven管理的web项目时没有src有关的目录的解决方案
一.问题如下 二.解决方法 首先关闭当前项目，接着修改全局设置，重新创建项目 在VM Options中添加"-DarchetypeCataloginternal"，点击ok保存 点击创建，如果创建成功没报错且有src，就ok了。 当然如果出现以下…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存 默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存 一级缓存（本地缓存&#…...
Ubuntu系统复制（U盘-电脑硬盘）
所需环境 电脑自带硬盘：1块 (1T) U盘1：Ubuntu系统引导盘（用于“U盘2”复制到“电脑自带硬盘”） U盘2：Ubuntu系统盘（1T，用于被复制） ！！！建议“电脑…...
git: early EOF
macOS报错： Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...
macOS 终端智能代理检测
🧠 终端智能代理检测：自动判断是否需要设置代理访问 GitHub 在开发中，使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新，例如： fatal: unable to access https://github.com/ohmyzsh/oh…...
用鸿蒙HarmonyOS5实现国际象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的国际象棋小游戏的完整实现代码，使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├── …...