web技术学习笔记和分享

合成图层

01.globalCompositeOperation

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
/* 
CanvasRenderingContext2D.globalCompositeOperation
Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 属性设置要在绘制新形状时应用的合成操作的类型，其中 type 是用于标识要使用的合成或混合模式操作的字符串。 默认是source-over
*/
// 绘制矩形 fillRect(x,y,width,height)
ctx.fillStyle = 'rgba(0,0,255,1)' // 蓝色
ctx.fillRect(300, 200, 100, 100)
ctx.fillStyle = 'rgba(255,0,0,1)' // 红色
ctx.globalCompositeOperation = "xor"; // 形状在重叠处变为透明，并在其他地方正常绘制。
ctx.fillRect(250, 150, 100, 100)

<template>
  <canvas id="c1" width="600" height="400">
    当前浏览器不支持canvas,请下载最新的浏览器
    <a href="https://www.google.cn/chrome/index.html">立即下载</a>
  </canvas>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c1");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  /* 
        CanvasRenderingContext2D.globalCompositeOperation
        Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 属性设置要在绘制新形状时应用的合成操作的类型，其中 type 是用于标识要使用的合成或混合模式操作的字符串。 默认是source-over
        */
  // 绘制矩形 fillRect(x,y,width,height)
  ctx.fillStyle = "rgba(0,0,255,1)"; // 蓝色
  ctx.fillRect(300, 200, 100, 100);
  ctx.fillStyle = "rgba(255,0,0,1)"; // 红色
  ctx.globalCompositeOperation = "xor"; // 形状在重叠处变为透明，并在其他地方正常绘制。
  ctx.fillRect(250, 150, 100, 100);
});
</script>

<style scoped></style>

02.刮刮卡

// 1、获取canvas画布
var c1 = document.querySelector("#c1");
if (!c1.getContext) {
    console.log('当前浏览器不支持canvas,请下载最新的浏览器');
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext('2d')
ctx.fillStyle = '#ccc'
ctx.fillRect(0, 0, c1.width, c1.height)

var isDraw = false
c1.onmousedown = function (e) {
    c1.onmousemove = function (e) {
        isDraw = true
        var x = e.pageX
        var y = e.pageY
        ctx.globalCompositeOperation = 'destination-out' // 仅保留现有画布内容和新形状不重叠的部分。
        ctx.arc(x, y, 20, 0, 2 * Math.PI)
        ctx.fill()
    }
}

c1.onmouseup = function (e) {
    isDraw = false
    c1.onmousemove = () => { }
}
var random = Math.random()
console.log(random);
var ggk = document.querySelector('#ggk')
if (random < 0.1) {
    ggk.innerHTML = '一等奖'
} else if (0.1 < random && random < 0.3) {
    ggk.innerHTML = '二等奖'
} else {
    ggk.innerHTML = '谢谢惠顾'
}

谢谢惠顾

<template>
  <div class="box">
    <div id="ggk">谢谢惠顾</div>
    <canvas id="c2" width="600" height="400">
      当前浏览器不支持canvas,请下载最新的浏览器
      <a href="https://www.google.cn/chrome/index.html">立即下载</a>
    </canvas>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 1、获取canvas画布
  var c1 = document.querySelector("#c2");
  if (!c1.getContext) {
    console.log("当前浏览器不支持canvas,请下载最新的浏览器");
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  ctx.fillStyle = "#ccc";
  ctx.fillRect(0, 0, c1.width, c1.height);

  var isDraw = false;
  c1.onmousedown = function (e) {
    c1.onmousemove = function (e) {
      console.log(e);
      isDraw = true;
      var x = e.offsetX;
      var y = e.offsetY;
      ctx.globalCompositeOperation = "destination-out";
      ctx.arc(x, y, 20, 0, 2 * Math.PI);
      ctx.fill();
    };
  };

  c1.onmouseup = function (e) {
    isDraw = false;
    c1.onmousemove = () => {};
  };
  var random = Math.random();
  var ggk = document.querySelector("#ggk");
  if (random < 0.1) {
    ggk.innerHTML = "一等奖";
  } else if (0.1 < random && random < 0.3) {
    ggk.innerHTML = "二等奖";
  } else {
    ggk.innerHTML = "谢谢惠顾";
  }
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box{
  position: relative;
}

#ggk {
  width: 600px;
  height: 400px;
  font-size: 30px;
  font-weight: 900;
  line-height: 400px;
  text-align: center;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  color: red;
  border: 1px solid #ccc;
  z-index: -1;
}
</style>

合成图层 ​

01.globalCompositeOperation ​

02.刮刮卡 ​

合成图层

01.globalCompositeOperation

02.刮刮卡