HTML5 实现刮刮乐游戏

会员

2642 人学过 69 次评价作者: silencezwm 难度: 初级综合评分: 9.1

本课程使用 HTML5 来完成 “刮刮乐” 的刮奖效果。HTML5 是 HTML 的第5代版本，也是目前最新的版本，同时本课程还用到 JavaScript 相关技术来完成。学习本课程有助于巩固前端知识。

课程内容

共1个章节

实验 1 HTML5实现刮刮乐效果

需加入课程后学习，点击加入

知识点: 1.HTML5 2.JavaScript 3.canvas

课程教师

silencezwm 共发布过 1 门课程

查看老师的所有课程 >

No file chosen

Markdown 语法

0 / 2000

最新评论

综合评分:

9.1

团子_蓝桥

L58

探姬

L55

优秀！

2021-10-08 09:51:47

探姬

L55

这国庆小活动靠谱吗？做了个刮头像的（想直接看效果：https://webdemo.probius.xyz/guaguale

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>刮头像(</title>
    <style>
      div.msg {
        font-family: 微软雅黑;
        color:#ffa502 ;
      }
      a:hover {
    color: rgb(0, 0, 0);
    text-decoration: none;
  }
  .btn-dang{
            border-radius: 8px;
            background-color: #21a3f1;
            color: rgb(255, 255, 255);
        }
    </style>
  </head>
  <body>
    <div id="main">
    <canvas
      id="myCanvas"
      width="400"
      height="400"
      style="border:1px solid #000;"
    >
      您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <div class="msg">
      头像不好看嘛？<a
        href="javascript:void(0)"
        onClick="window.location.reload()"
        class="btn-dang"
        >点我试试!</a
      >
    </div>
  </div>
  </body>
  <script>
    var mycanvas = document.getElementById("myCanvas");
    var ctx = mycanvas.getContext("2d");
    var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg"];
    var number = Math.floor(Math.random() * arr.length);
    var urla = "https://probius-1259078248.cos.ap-chengdu.myqcloud.com/temp/";
    mycanvas.style.background = "url(" + urla+arr[number] + ")";
    mycanvas.style.backgroundSize = "100%";
    ctx.fillStyle = "#cc6633";
    ctx.fillRect(0, 0, 10000,10000);
    var status = "false";
    mycanvas.onmousedown = function () {
      status = "true";
    };
    mycanvas.onmouseup = function () {
      status = "false";
    };
    mycanvas.onmousemove = function (e) {
      if (status == "true") {
        ctx.globalCompositeOperation = "destination-out";
        ctx.beginPath();
        ctx.arc(e.pageX, e.pageY, 20, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
      }
    };
  </script>
</html>

2021-10-02 13:03:33