py网站开发视频教程,中国互联网排名前十名,做网推的网站,微信微网站开发百度云用HTML5的#xff1c;canvas#xff1e;元素实现刮刮乐游戏
用HTML5的canvas元素实现刮刮乐#xff0c;要求#xff1a;将上面的“图层”的图像可用鼠标刮去#xff0c;露出下面的“图层”的图像。
示例从简单到复杂。
简单示例
准备两张图像#xff0c;我这…用HTML5的canvas元素实现刮刮乐游戏
用HTML5的canvas元素实现刮刮乐要求将上面的“图层”的图像可用鼠标刮去露出下面的“图层”的图像。
示例从简单到复杂。
简单示例
准备两张图像我这里上面的图像top_image.png下面的图像bottom_image.png如下图 我这里为方便 经图片和源码文件放在同一个文件夹中。 先看用一个canvas元素实现刮刮乐源码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title刮刮乐Scratch Card/titlestyle* {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
bodycanvas idcanvas width356 height358/canvasscriptvar 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 langen
headmeta charsetUTF-8title刮刮乐Scratch Card2/titlestyle* {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
bodydiv idcontainercanvas idbottomCanvas width356 height358/canvas !-- 底层Canvas --canvas idtopCanvas width356 height358/canvas !-- 上层Canvas --/divscriptdocument.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 langen
headmeta charsetUTF-8title刮刮乐Scratch Card3/titlestylediv{ 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
bodydiv 选择游戏图片select idmySelect onchangeloadImages() !-- 添加 onchange 事件 --option value11/option !-- 更改 value 以匹配图像名称 --option value22/optionoption value33/option/selectdivdiv idcontainercanvas idbottomCanvas width356 height358/canvas !-- 底层Canvas --canvas idtopCanvas width356 height358/canvas !-- 上层Canvas --/divscriptfunction 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
