canvas实现刮刮卡效果

最新推荐文章于 2024-05-16 02:23:34 发布

我排着队拿着前端号码牌

最新推荐文章于 2024-05-16 02:23:34 发布

阅读量439

点赞数

分类专栏：关于canvas

本文链接：https://blog.csdn.net/weixin_45024541/article/details/103727404

版权

关于canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用了globalCompositeOperation属性

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
源图像 = 您打算放置到画布上的绘图。
目标图像 = 您已经放置在画布上的绘图。

属性如下：

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

实现一个刮刮卡效果，代码如下：
pc端：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="ctx" width="400px" height="200px"></canvas>
  <script>
    var canvas = document.getElementById('ctx');
    var ctx = canvas.getContext("2d")
    // canvas宽度
    var width = 400;
    // canvas高度
    var height = 200;

    init();
    function init(){
      // 现在canvas上画一个灰色的矩形
      ctx.fillStyle = '#ddd';
      ctx.fillRect(0,0,width,height);

      // 设置canvas的背景为一张图片，这里的图片是用base64保存的
      canvas.style.background = 'url("https://www.kkkk1000.com/images/bg3.jpg") no-repeat center';
      canvas.style.backgroundSize = "100% 100%";

      // 设置画笔宽度
      ctx.lineWidth = 35;
      // 线交汇时，为圆角
      ctx.lineJoin = "round";
    }

    canvas.addEventListener('mousedown',mouseDown,false);
    canvas.addEventListener('mousemove',mouseMove,false);
    canvas.addEventListener('mouseup',mouseUp,false);

    // 用来判断是否可以画线
    var isDrawing;
    // 开始画线时，线起点的X坐标
    var startX = 0;
    // 开始画线时，线起点的Y坐标
    var startY = 0;
    // 判断是否擦除全部灰色
    var removeGrey = 0;

    function mouseDown(e) {
      // 按下鼠标时，可以开始画线
      isDrawing = true;
      // 保存鼠标点击时的位置
      startX = e.layerX;
      startY = e.layerY;
    }

    function mouseMove(e) {
      if(isDrawing) {
        removeGrey ++;
        var x = e.layerX;
        var y = e.layerY;
        ctx.globalCompositeOperation = 'destination-out'
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(x,y);
        ctx.closePath();
        ctx.stroke();
        startX = x;
        startY = y;
      }
    }

    // 松开鼠标时
    function mouseUp(e) {
      isDrawing = false;
      // console.log(removeGrey);
      //当刮开部分超过某个值时，将灰色全部清除 
      if(removeGrey>150){
        ctx.fillStyle = 'blue';
        ctx.fillRect(0,0,width,height);
      }
    }



  </script>
</body>
</html>

移动端：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas id="ctx" width="400px" height="200px"></canvas>
  <script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.min.js"></script>
  <script>
    var canvas = document.getElementById('ctx');
    var ctx = canvas.getContext("2d")
    // canvas宽度
    var width = 400;
    // canvas高度
    var height = 200;

    init();
    function init(){
      // 现在canvas上画一个灰色的矩形
      ctx.fillStyle = '#ddd';
      ctx.fillRect(0,0,width,height);

      // 设置canvas的背景为一张图片，这里的图片是用base64保存的
      canvas.style.background = 'url("https://www.kkkk1000.com/images/bg3.jpg") no-repeat center';
      canvas.style.backgroundSize = "100% 100%";

      // 设置画笔宽度
      ctx.lineWidth = 35;
      // 线交汇时，为圆角
      ctx.lineJoin = "round";
    }

    canvas.addEventListener('touchstart',mouseDown,false);
    canvas.addEventListener('touchmove',mouseMove,false);
    canvas.addEventListener('touchup',mouseUp,false);

    // 用来判断是否可以画线
    var isDrawing;
    // 开始画线时，线起点的X坐标
    var startX = 0;
    // 开始画线时，线起点的Y坐标
    var startY = 0;
    // 判断是否擦除全部灰色
    var removeGrey = 0;

    function mouseDown(e) {
      // 按下鼠标时，可以开始画线
      isDrawing = true;
      // 保存鼠标点击时的位置
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
    }

    function mouseMove(e) {
      if(isDrawing) {
        removeGrey ++;
        var x = e.touches[0].clientX;
        var y = e.touches[0].clientY;
        ctx.globalCompositeOperation = 'destination-out'
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(x,y);
        ctx.closePath();
        ctx.stroke();
        startX = x;
        startY = y;
      }
    }

    // 松开鼠标时
    function mouseUp(e) {
      isDrawing = false;
      console.log(removeGrey);
      //当刮开部分超过某个值时，将灰色全部清除 
      if(removeGrey>100){
        ctx.fillStyle = 'blue';
        ctx.fillRect(0,0,width,height);
      }
    }



  </script>
</body>
</html>

我排着队拿着前端号码牌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas实现刮刮卡效果

使用了globalCompositeOperation属性globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。源图像 = 您打算放置到画布上的绘图。目标图像 = 您已经放置在画布上的绘图。属性如下：source-over 默认。在目标图像上显示源图像。source-atop 在目标图像顶部显示源图像。源图像位于目标图...
复制链接

扫一扫

专栏目录