canvas 刮刮卡

最新推荐文章于 2021-10-11 17:27:13 发布

蓝爱人

最新推荐文章于 2021-10-11 17:27:13 发布

阅读量223

点赞数

文章标签： html5 html canvas

本文链接：https://blog.csdn.net/weixin_46413834/article/details/120672724

版权

首先了解HTML中canvas的globalCompositeOperation 属性

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

属性值

默认值为source-over    源图像叠加在目标图像上
source-atop           在目标图像顶部显示源图像,源图像位于目标图像之外的部分是不可见的
source-in             在目标图像中显示源图像,只有目标图像之内的源图像部分会显示,目标图像是透明的
source-out            在目标图像之外显示源图像,只有目标图像之外的源图像部分会显示,目标图像是透明的
destination-over      在源图像上显示目标图像
destination-atop      在源图像顶部显示目标图像,目标图像位于源图像之外的部分是不可见的
destination-in        在源图像中显示目标图像,只有源图像之内的目标图像部分被显示,源图像是透明的
destination-out       在源图像之外显示目标图像,只有源图像之外的目标图像部分会被显示,源图像是透明的
lighter               显示源图像 + 目标图像
copy                  显示源图像,忽略目标图像
xor                   使用异或操作对源图像与目标图像进行组合   xor 等同于 lighter

实例代码:

<body>

  <canvas id="canvas" width="800" height="600"></canvas>


  <script type="text/javascript">
    var canvas = document.querySelector("#canvas")
    var ctx = canvas.getContext("2d")

    // 第一个红色矩形为目标图像
    ctx.fillStyle = "hotpink"
    ctx.fillRect(100,100,200,200)


    ctx.globalCompositeOperation = "xor"
    console.log(ctx);
    // 默认值为source-over    源图像叠加在目标图像上
    // source-atop           在目标图像顶部显示源图像,源图像位于目标图像之外的部分是不可见的
    // source-in             在目标图像中显示源图像,只有目标图像之内的源图像部分会显示,目标图像是透明的
    // source-out            在目标图像之外显示源图像,只有目标图像之外的源图像部分会显示,目标图像是透明的
    // destination-over      在源图像上显示目标图像
    // destination-atop      在源图像顶部显示目标图像,目标图像位于源图像之外的部分是不可见的
    // destination-in        在源图像中显示目标图像,只有源图像之内的目标图像部分被显示,源图像是透明的
    // destination-out       在源图像之外显示目标图像,只有源图像之外的目标图像部分会被显示,源图像是透明的
    // lighter               显示源图像 + 目标图像
    // copy                  显示源图像,忽略目标图像
    // xor                   使用异或操作对源图像与目标图像进行组合   xor 等同于 lighter

    // 第二个蓝色矩形为源图像
    ctx.fillStyle = "deepskyblue"
    ctx.fillRect(200,200,200,200)

  </script>
</body>

刮刮卡的实现

思路:

1.先写好html以及css结构

    <div id="ggk">
      <div class="jp">谢谢惠顾</div>
      <canvas id="canvas" width="600" height="200"></canvas>
    </div>

2.绘制canvas盒子

    let canvas = document.querySelector("#canvas")
    let ctx = canvas.getContext('2d')
    ctx.fillStyle = "darkgray"   // 填充颜色
    ctx.fillRect(0,0,600,200)    // 盒子大小

    ctx.font = "20px 微软雅黑"          // 文字大小以及字体
    ctx.fillStyle = "#fff"             // 文字的颜色
    ctx.fillText("刮刮卡",260,100)       // 字体以及位置

3.我们在刮奖的时候都知道,需要进行刮掉外面的一层,所以我们借助鼠标点击,鼠标移动以及鼠标抬起事件来绘制圆形.,将源图像内的目标的内容给清除掉,当实现之后发现清除掉之后是白色的背景 ,并没有显示出来"谢谢惠顾"四个字,所以我们需要用到ctx.globalCompositeOperation = "destination-out"属性,然后使背景透明,显示出"谢谢惠顾"四个字

    let isDraw = false
    // 监听鼠标按下事件
    canvas.onmousedown = function() {
      isDraw = true   // 设置isDraw = true,即为允许绘制
      console.log(isDraw);
    }
    // 监听鼠标移动事件
    canvas.onmousemove = function(e) {
      // 移动的时候绘制圆形,将源图像内的目标的内容给清除掉
      // console.log(e);
      if(isDraw) {
        let x = e.pageX - ggkDom.offsetLeft
        let y = e.pageY - ggkDom.offsetTop
        ctx.globalCompositeOperation = "destination-out"
        ctx.arc(x,y,20,0,2*Math.PI)
        ctx.fill()
      }
    }
    // 监听鼠标抬起事件
    canvas.onmouseup = function() {
      isDraw = false
      console.log(isDraw);
    }

4.随机数实现抽奖

    // 随机奖
    let arr = [{content:"一等奖:IphoneXs",p:0.1},{content:"二等奖:布娃娃",p:0.2},{content:"三等奖:气球",p:0.3}]
    let randomNum = Math.random()
    if(randomNum<arr[0].p){
      jpDom.innerHTML = arr[0].content
    }else if(randomNum<arr[1].p+arr[0].p){
      jpDom.innerHTML = arr[1].content
    }else if(randomNum<arr[2].p+arr[1].p+arr[0].p){
      jpDom.innerHTML = arr[2].content
    }

刮刮卡实现代码:

  <style type="text/css">
  #ggk {
    width: 600px;
    height: 200px;
    position: relative;
  }
  #ggk .jp{
    width: 600px;
    height: 200px;
    line-height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    color: deeppink;
    font-size: 50px;
  }
  #ggk #canvas {
    width: 600px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
  }
  </style>


<body>
    <div id="ggk">
      <div class="jp">谢谢惠顾</div>
      <canvas id="canvas" width="600" height="200"></canvas>
    </div>

  <script type="text/javascript">
    let canvas = document.querySelector("#canvas")
    let ggkDom = document.querySelector("#ggk")
    let jpDom = document.querySelector(".jp")
    let ctx = canvas.getContext('2d')
    ctx.fillStyle = "darkgray"
    ctx.fillRect(0,0,600,200)

    ctx.font = "20px 微软雅黑"          // 文字大小以及字体
    ctx.fillStyle = "#fff"             // 文字的颜色
    ctx.fillText("刮刮卡",260,100)       // 字体以及位置


    let isDraw = false
    // 监听鼠标按下事件
    canvas.onmousedown = function() {
      isDraw = true   // 设置isDraw = true,即为允许绘制
      console.log(isDraw);
    }
    // 监听鼠标移动事件
    canvas.onmousemove = function(e) {
      // 移动的时候绘制圆形,将源图像内的目标的内容给清除掉
      // console.log(e);
      if(isDraw) {
        let x = e.pageX - ggkDom.offsetLeft
        let y = e.pageY - ggkDom.offsetTop
        ctx.globalCompositeOperation = "destination-out"
        ctx.arc(x,y,20,0,2*Math.PI)
        ctx.fill()
      }
    }
    // 监听鼠标抬起事件
    canvas.onmouseup = function() {
      isDraw = false
      console.log(isDraw);
    }


    // 随机奖
    let arr = [{content:"一等奖:IphoneXs",p:0.1},{content:"二等奖:布娃娃",p:0.2},{content:"三等奖:气球",p:0.3}]
    let randomNum = Math.random()
    if(randomNum<arr[0].p){
      jpDom.innerHTML = arr[0].content
    }else if(randomNum<arr[1].p+arr[0].p){
      jpDom.innerHTML = arr[1].content
    }else if(randomNum<arr[2].p+arr[1].p+arr[0].p){
      jpDom.innerHTML = arr[2].content
    }
  </script>
</body>