用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>

复杂示例

下面是改进，从列表框（下拉框）选择图片刮刮乐，增加了游戏的趣味性。

先给出效果

我这里游戏图片：

源码如下：

<!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

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/712167.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

node express实现Excel文档转json文件

node express实现Excel文档转json文件

有些场景我们需要将Excel文档中的内容抽取出来生成别的文件&#xff0c;作为一个前端&#xff0c;服务框架最应该熟悉的就是node了&#xff0c;以下是基于多语言转换实现代码&#xff0c;看明白原理自己改一改就能用了 1.安装node环境 2.创建一个文件夹&#xff0c;文件夹中创建…
阅读更多...
7、Redis-事务、持久化、内存淘汰机制和过期key处理

7、Redis-事务、持久化、内存淘汰机制和过期key处理

目录 一、事务 二、持久化 三、内存淘汰机制 四、过期key处理 一、事务 Redis的事务本质上就是一个批量执行命令的操作。分为三个步骤&#xff1a; 开始事务&#xff1a;multi命令入队&#xff1a;正常输入命令即可执行事务&#xff08;依次执行命令&#xff09;&#xf…
阅读更多...
掌握java模板方法模式，提升代码复用与扩展的艺术

掌握java模板方法模式，提升代码复用与扩展的艺术

Java 模板方法模式是一种行为型设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;并将一些步骤延迟到子类中实现。模板方法模式使得子类可以在不改变算法结构的情况下重定义算法中的某些步骤。 使用场景 算法骨架固定&#xff1a;如果一个算法的基本结构已经固定&#…
阅读更多...
跨专业考研难度大吗？听听过来人的真实经历

跨专业考研难度大吗？听听过来人的真实经历

在考研的大潮中&#xff0c;跨专业考研成为了一个不可忽视的现象。许多考生因为对原专业失去兴趣、追求职业梦想或其他原因&#xff0c;选择了跨专业报考。那么&#xff0c;跨专业考研的难度究竟有多大呢&#xff1f;今天&#xff0c;我们就来聊聊这个话题&#xff0c;听听过来…
阅读更多...
不是我吹，这8道HashMap面试题让你面试时对答如流

不是我吹，这8道HashMap面试题让你面试时对答如流

前言 又到了一年一度的金三银四面试季&#xff0c;我们拿着自己的面试秘籍去面试&#xff0c;但是面试官的问题五花八门&#xff0c;让我们摸不清他们的套路。今天我就总结了面试时必问的hashmap面试题&#xff0c;无论面试官怎么问&#xff0c;我们都对答如流。 另外本人整理了…
阅读更多...
java小记（2）

java小记（2）

IS-A&#xff1a;类的父子继承关系。 default&#xff1a;关键字&#xff0c;与Java中的public&#xff0c;private等关键字一样&#xff0c;都属于修饰符关键字&#xff0c;可以用来修饰属性、方法以及类&#xff0c;但是default一般用来修饰接口中的方法。 接口与抽象类的区…
阅读更多...
代码随想录算法训练营第二十四天 | 77. 组合

代码随想录算法训练营第二十四天 | 77. 组合

回溯算法理论基础 https://programmercarl.com/%E5%9B%9E%E6%BA%AF%E7%AE%97%E6%B3%95%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。 回溯是递归的副产品&#xff0c;只要有递归就会有回溯。 回溯法并不是什么高效的…
阅读更多...
马斯克正式起诉OpenAI和奥特曼！

马斯克正式起诉OpenAI和奥特曼！

就在刚刚&#xff0c;马斯克闹出来一件大事——正式起诉OpenAI和Sam Altman&#xff0c;并要求OpenAI 恢复开源GPT-4等模型&#xff01; 众所周知&#xff0c;马斯克这两年一只在推特上指责 OpenAI是CloseAI(不开源)&#xff0c;但都只是停留在口头上。 而这次马斯克动了真格。…
阅读更多...
nginx if 指令

nginx if 指令

目录 nginx if 指令直接判断变量判断是否等于字符串判断变量是否匹配正则表达式文件及目录判断示例1&#xff1a;判断index.html是否存在示例2&#xff1a;判断URL中是否存在某个参数Parameter示例3&#xff1a;判断URI中是否为某个特定路径示例4&#xff1a;开放白名单内的功能…
阅读更多...
从0开始python学习-53.python中flask创建简单接口

从0开始python学习-53.python中flask创建简单接口

目录 1. 创建一个简单的请求,没有写方法时默认为get 2. 创建一个get请求 3. 创建一个post请求&#xff0c;默认可以使用params和表单传参 4. 带有参数的post请求 1. 创建一个简单的请求,没有写方法时默认为get from flask import Flask, request# 初始化一个flask的对象 ap…
阅读更多...
RK3566 linux iperf网络测试

RK3566 linux iperf网络测试

一、开发环境 系统:buildroot&#xff1b; 在Linux目标板和Windows PC上运行iperf进行测试&#xff1b; 二、调试 1、查询目标板上的iperf 使用终端助手连接目标板&#xff0c;然后输入命令查询iperf的版本&#xff1a; rootrk3566-buildroot:~# iperf -v iperf version …
阅读更多...
图数据库 之 Neo4j - 应用场景3 - 知识图谱(8)

图数据库 之 Neo4j - 应用场景3 - 知识图谱(8)

背景 知识图谱的复杂性：知识图谱通常包含大量的实体、关系和属性，以及它们之间的复杂关联。传统的关系型数据库在处理这种复杂性时可能面临性能和灵活性的挑战。 图数据库的优势：图数据库是一种专门用于存储和处理图结构数据的数据库。它们使用节点和边来表示实体和关系，并…
阅读更多...
USB - Battery Charing

USB - Battery Charing

Getting to the bottom of USB Battery Charging (了解 USB 电池充电的真相) 如今&#xff0c;几乎所有带电池的产品都被期望支持 BC1.2 USB 充电标准。 Today, almost every product with a battery is expected to support the BC1.2 standard for USB charging. 这对消费者来…
阅读更多...
详解字符串函数＜string.h＞（上）

详解字符串函数＜string.h＞（上）

1. strlen函数的使用和模拟实现 size_t strlen(const char* str); 1.1 函数功能以及用法 字符串长度 strlen函数的功能是计算字符串的长度。在使用时&#xff0c;要求用户传入需要计算长度的字符串的起始位置&#xff0c;并返回字符串的长度。 #include <stdio.h> #…
阅读更多...
基于SSM医院电子病历管理系统的设计与实现（源代码+数据库脚本+万字文档+PPT）

基于SSM医院电子病历管理系统的设计与实现（源代码+数据库脚本+万字文档+PPT）

系统介绍 医院电子病历管理系统主要是借助计算机&#xff0c;通过对医院电子病历管理系统所需的信息管理&#xff0c;增加用户的选择&#xff0c;同时也方便对广大用户信息的及时查询、修改以及对用户信息的及时了解。医院电子病历管理系统 对用户带来了更多的便利&#xff0c…
阅读更多...
Python GUI自动化定位代码参考

Python GUI自动化定位代码参考

一、pyautogui原始逻辑 import pyautogui # 获取指定图片在屏幕上的位置 image_path path/to/image.png target_position pyautogui.locateCenterOnScreen(image_path) if target_position is not None: # 获取偏移量 offset_x 10 offset_y 10 # 计算实际点…
阅读更多...
一文读懂ZKFair PFP-CyberArmy的参与价值与潜力

一文读懂ZKFair PFP-CyberArmy的参与价值与潜力

3月2日&#xff0c;ZKFair PFP-CyberArmy 将在 Element 上正式开始Public Sale。
阅读更多...
文件基础和文件fd

文件基础和文件fd

文章目录 预备知识C语言的文件接口系统调用文件fd 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站。 预备知识 我们平时说文件就是说文件里…
阅读更多...
1_Springboot(一)入门

1_Springboot(一)入门

Springboot&#xff08;一&#xff09;——入门 本章重点&#xff1a; 1.什么是Springboot; 2.使用Springboot搭建web项目&#xff1b; 一、Springboot 1.Springboot产生的背景 Servlet->Struts2->Spring->SpringMVC&#xff0c;技术发展过程中&#xff0c;对使…
阅读更多...
大模型量化技术原理-SmoothQuant

大模型量化技术原理-SmoothQuant

近年来&#xff0c;随着Transformer、MOE架构的提出&#xff0c;使得深度学习模型轻松突破上万亿规模参数&#xff0c;从而导致模型变得越来越大&#xff0c;因此&#xff0c;我们需要一些大模型压缩技术来降低模型部署的成本&#xff0c;并提升模型的推理性能。 模型压缩主要分…
阅读更多...
最新文章

Copyright @ 2022~2023