基于华为云主机 CodeArts IDE 与 JavaScript 的网页刮刮卡设计-优快云博客

本案例由开发者：华为2024年第三批次协同育人项目-山东科技大学-崔宾阁老师提供

1 概述

1.1 案例介绍

随着用户对网页体验需求的提升，互动性与趣味性成为网页设计的重要方向。网页刮刮卡凭借“刮开隐藏内容”的游戏化设计，被广泛应用于电商促销、用户激励等场景，能够显著提升用户的参与感和页面的吸引力。通过JavaScript实现刮刮卡功能，不仅增加了网站的趣味性，也强化了用户与页面之间的互动，是提升网站用户体验的一种有效方式。

本案例依托华为开发者空间提供的云主机与CodeArts IDE，结合JavaScript技术，开发了一个完整的网页刮刮卡功能。项目实现一个动态的网页刮刮卡效果，首先设计了刮刮卡的基础框架，包括背景图片、刮卡区域的透明遮罩层等。通过监听鼠标或触摸事件，动态地绘制刮开的区域，并在刮开部分展示隐藏的内容。开发者可在云端环境中进行代码编写与运行，利用弹性高效的计算资源，无需关注底层基础设施，即可专注于前端功能的实现。

通过本案例，开发者将掌握JavaScript在网页互动功能中的应用，重点学习HTML5 Canvas绘图、事件监听及CSS样式控制等技术。同时，开发者将熟悉云主机及CodeArts IDE for Java开发环境，掌握JavaScript基础语法、数据结构、函数和对象编程，了解云端开发流程、项目管理和远程调试。案例旨在提升实战能力，为构建高互动性Web应用打下基础。

1.2 案例时间

本案例总时长预计30分钟。

1.3 案例流程

373efd76defa4060b9157db0f8af332c

说明：

① 申请并登录华为开发者空间—云主机，打开CodeArts IDE创建工程；

② 在云主机CodeArts IDE for Java中编写案例项目代码；

③ 通过Firefox启动案例项目的入口文件。

1.4 资源总览

本案例预计花费总计0元。

资源名称	规格	单价（元）	时长（分钟）
开发者空间—云主机	鲲鹏通用计算增强型 kC2 \| 4vCPUs \| 8G \| Ubuntu	免费	30
CodeArts IDE	CodeArts IDE for Java	免费	30

2 操作步骤

2.1 配置开发者空间—云主机

本案例中，使用华为开发者空间所提供的云主机平台以及CodeArts+JavaScript开发工具，完成网页刮刮卡案例的开发工作。点击链接（https://support.developer.huaweicloud.com/doc/development/resource-tools/zh-cn_topic_0000002367559525-0000002367559525 ）可跳转至免费领取云主机指南。

1. 在浏览器中输入华为云开发者空间网址：https://developer.huaweicloud.com/developerspace，进入到华为云开发者空间页面。

在华为开发者空间页面点击“免费领取”，跳转到开发者空间页面，如未领取根据页面提示进行云主机领取。

bf11ac0270f14aad98b656bc0335516e

2. 在开发者空间页面，点击左侧“工作台”按钮进入工作台页面，再点击“配置云主机”进行云主机的配置。

0c3913519db84d158132eb50ceb2c92b

3. 在配置云主机窗口中自定义云主机名称，配置完毕后点击“安装”。

f0ec68d50f284cc89402b7e51c011f4f

4. 安装完毕后点击“打开云主机”>“进入桌面”即可进入云主机。

44e120fb7d634136b7e22a24a4074090

5. 等待环境云主机下载镜像、安装系统、安装工具集，首次进入云主机大约需要3至5分钟。

e739b030c20241b88f17d50b603fc754

6. 环境准备完毕后，即可进入云主机，云主机桌面如下图所示。

e27f413f6d804f8090e9ae47a2ee0a0c

2.2 创建项目

1. 双击打开云主机桌面上的CodeArts IDE for Java（虽然IDE名称带有“Java”，但本案例用于编写JavaScript前端代码）。

867052da28e645deab03c412d6ba0ce5

2. 首次使用CodeArts IDE创建工程，可直接点击左侧栏目中的“新建工程”，创建网页刮刮卡工程项目。

072bb27da5584280b85f368bbc53a3b7

3. 新建工程后，在工程名称栏输入：ScratchCard，工程存放位置、构建系统及JDK直接使用默认配置，接着点击右下角蓝色“创建”按钮。

2faae8c916634691bf33243bdd2475a6

4. 在新建的“ScratchCard”工程项目中，点击左上角新建文件夹，输入：images，输入完毕后按下回车键创建完毕，该文件夹用于存放刮开涂层后的中奖图片，示例图（prize.png）可点击此链接（https://pan.baidu.com/s/1YLCC1uF7C-R8CAUC07LxLg?from=init&pwd=p565#list/path=%2F）进行下载。

52388a34cbce47df8e2b61d4b3101b18

5. 同样在“ScratchCard”工程项目中，点击左上角新建HTML文件，输入：scratchcard-page.html，输入完毕后按下回车键，该文件用于存放实现网页刮刮卡页面的代码，代码内容在后续文中进行介绍。

3d5e7e1f6fd747d5bf7ed6cc0f70e008

6. 代码编写完成后，鼠标右键单击“scratchcard-page.html”文件，选择“打开所在的文件夹”，找到网页刮刮卡项目在云主机中的位置。

4faf49da0a9f4d0bb16ff321efd8a203

7. 在打开的项目文件夹中，鼠标右键单击编写好的网页代码文件，依次点击“打开方式”>“Firefox”，在火狐浏览器中查看网页刮刮卡页面。

a8dae728246542538052fb64506a8528

2.3 编写代码

以下是网页刮刮卡的实现代码（存放于scratchcard-page.html文件中），可供参考学习。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页刮刮卡</title>
    <style>
        .img {
            width: 400px;
            height: 300px;
            position: absolute;
            left: 200px;
            z-index: -1;
        }
        canvas {
            margin-left: 200px;
        }
        body {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="img">
        <img src="./images/prize.png" style="width:100%;height:100%;" />
    </div>
    <canvas id="canvas" width="400" height="300"></canvas>
    <script>
        let canvas = document.querySelector("#canvas");
        let context = canvas.getContext("2d");
        // 绘制涂层（灰色部分）
        context.beginPath();
        context.fillStyle = "grey";
        context.fillRect(0, 0, 400, 300); // 设置画布大小
        // 监听鼠标事件
        canvas.addEventListener("mousemove", (e) => {
            // 当鼠标左键按下&&移动鼠标时，清除鼠标附近涂层
            if (e.buttons === 1) { // 使用 e.buttons 检查左键是否按下
                const rect = canvas.getBoundingClientRect(); // 获取canvas的位置和尺寸
                const x = e.clientX - rect.left; // 相对于canvas的x坐标
                const y = e.clientY - rect.top; // 相对于canvas的y坐标
                context.globalCompositeOperation = "destination-out"; // 橡皮擦模式
                context.beginPath();
                // 以鼠标位置为圆心，半径为10px的圆
                context.arc(x, y, 10, 0, Math.PI * 2);
                context.fill();
            }
        });
    </script>
</body>
</html>

本案例通过综合运用HTML的层叠结构、CSS定位与层级控制、Canvas 绘图API、以及JavaScript事件监听与坐标计算，实现了一个简易的网页刮刮卡网页，主要技术实现如下：

1. HTML结构：页面整体结构较简洁，核心是“底图”+“覆盖层”。使用<div class="img">放置奖品图片，作为被遮盖的内容，在底图上方叠加了一个<canvas>元素，用于绘制可刮开的遮罩层。

2. CSS布局：为img设置固定宽高（400×300px），并使用position: absolute控制位置，同时通过z-index: -1让图片在画布下方显示；canvas设置了与图片相同的尺寸并叠加在其上，使其与图片重叠；body { margin: 0; }去掉页面默认边距，避免影响布局。

3. Canvas绘图：Canvas在此承担了“可擦除层”的作用。通过canvas.getContext("2d")获取2D绘图环境，使用fillRect(0, 0, 400, 300)在整个画布上绘制灰色矩形，作为刮刮卡的涂层。

4. 事件监听与鼠标坐标：通过给canvas添加mousemove事件监听器，用于检测鼠标移动；使用e.buttons === 1判断用户是否按下了鼠标左键；借助canvas.getBoundingClientRect()获取画布相对窗口的位置，再计算鼠标在画布内的坐标(x, y)。

5. 橡皮擦效果实现：通过设置context.globalCompositeOperation = "destination-out"切换到“橡皮擦模式”，在鼠标当前位置以(x, y)为圆心绘制半径为10px的圆形区域（arc(x, y, 10, 0, Math.PI * 2)），并调用fill()将其擦除。随着鼠标移动，不断擦除灰色涂层，逐渐显露出底层奖品图片，实现刮刮卡效果。