开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

世界杯

世界杯正如火如荼的进行中，总有你喜欢的球星，今天做个球星刮刮乐，你能刮到你喜欢的球星吗？你喜欢的是帅气的世界杯官方用球（被踢最多的球星） 内马尔 还是极度自律的 C罗，还是潇洒的梅西，还是身价超高的 姆巴佩

捕获12.PNG

code.juejin.cn/pen/7171699…

核心的的是canvas 图层

一：创建一个画布（Canvas）

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

    <canvas id="canvas" width="400" height="100"></canvas>

二：使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

canvas = document.querySelector("#canvas");
ctx = canvas.getContext("2d");

三：绘制矩形

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。 //canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)，上面的 fillRect 方法拥有参数 (0,0,400,200)。意思是：在画布上绘制 400x200 的矩形，从左上角开始 (0,0)。

ctx.fillStyle = "darkgray";
ctx.fillRect(0, 0, 400, 100);

四：默认功能

canvasDown() {
      this.isDraw = true;
    },

五：鼠标事件

根据自身画布的位置自行计算即可。

<canvas
        id="canvas"
        width="400"
        height="100"
        @mousedown="canvasDown($event)"
        @mousemove="canvasMove($event)"
        @mouseup="canvasUp($event)"
      ></canvas>

canvasMove(e) {
      if (this.isDraw) {
        let x = e.pageX - this.ggkDom.offsetLeft + this.ggkDom.offsetWidth / 2;
        let y = e.pageY - this.ggkDom.offsetTop;
        this.ctx.beginPath();
        this.ctx.arc(x, y, 20, 0, 2 * Math.PI);
        this.ctx.globalCompositeOperation = "destination-out";
        this.ctx.fill();
        this.ctx.closePath();
      }

重点：利用 globalCompositeOperation 属性来改变绘制图形重叠的合成样式
‘destination-out’仅仅保留老图像与新图像没有重叠的部分


ctx.globalCompositeOperation = 'destination-out'

结构

<template>
  <div class="contain">
    <h1 style="text-align: center">球星刮刮乐</h1>
    <div id="ggl">
      <div class="jp">{{ contentText }}</div>
      <canvas
        id="canvas"
        width="400"
        height="100"
        @mousedown="canvasDown($event)"
        @mousemove="canvasMove($event)"
        @mouseup="canvasUp($event)"
      ></canvas>
    </div>

  </div>
</template>

样式

<style lang="less">
.contain {
  width: 100%;
  height: 100%;
}

#ggl {
  width: 400px;
  height: 100px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

.jp,
canvas {
  position: absolute;
  width: 400px;
  height: 100px;
  left: 0;
  top: 0;
  text-align: center;
  font-size: 25px;
  line-height: 100px;
  color: deeppink;
}
.again{
    text-align: center;
    line-height: 50px;
    margin-top: 30px;
    width: 100px;
    height: 50px;
    border-radius: 30px;
    background-color: rgb(224, 89, 36);
    color: #fff;
    cursor: pointer;
    display: inline-block;
}
</style>

js

<script>
export default {
  name: "",
  data() {
    return {
      ggkDom: "",
      jp: "",
      ctx: null,
      canvas:null,
      contentText: "",
      isDraw: false,
      arr: [
        { content: "奖励一个内马尔", p: 1 },
        { content: "奖励一个梅西", p: 2 },
        { content: "奖励一个C罗", p: 3 },
        { content: "奖励一个姆巴佩", p: 4 },
        { content: "奖励一个维尼修斯", p: 5 },
        { content: "奖励一个福登", p: 6 },
        { content: "奖励一个佩德里", p: 7 },
        { content: "奖励一个巴尔韦德", p: 8 },
        { content: "奖励一个哈里·凯恩", p: 9},
      ],
    };
  },
  methods: {
    refresh(){
        // this.$forceUpdate();
         window.location.reload();
    },  
    random() {
      let sj = Math.floor(Math.random() * 8 + 1);
        this.contentText = this.arr[sj].content;
    },
    initCanvas() {
      this.random();
      this.jp = document.querySelector(".jp");
      this.ggkDom = document.querySelector("#ggl");
      this.canvas = document.querySelector("#canvas");
      this.ctx = canvas.getContext("2d");
      this.ctx.fillStyle = "darkgray";
      this.ctx.fillRect(0, 0, 400, 100);
    },
    canvasDown() {
      this.isDraw = true;
    },
    canvasMove(e) {
      if (this.isDraw) {
        let x = e.pageX - this.ggkDom.offsetLeft + this.ggkDom.offsetWidth / 2;
        let y = e.pageY - this.ggkDom.offsetTop;
        this.ctx.beginPath();
        this.ctx.arc(x, y, 20, 0, 2 * Math.PI);
        this.ctx.globalCompositeOperation = "destination-out";
        this.ctx.fill();
        this.ctx.closePath();
      }
    },
    canvasUp() {
      this.isDraw = false;
    },
  },

  mounted() {
    
    this.initCanvas();
  },
};
</script>

球星刮刮乐，总有一个你喜欢的

世界杯