globalCompositeOperation的小栗子---刮刮卡(含源代码)

上一篇博客我们讲解了canvas的globalCompositeOperation的属性,了解了源图像和目标图像以及他的一些属性值,这一篇我们运用这个属性来做一个小案例–刮刮卡

实现

  1. 先把图片放上去,然后放一个一样大的canvas标签放在上面,。以实现我们后面的刮开效果
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
        }
        
        img {
            display: block;
            width:800px;
            height: 600px;
        }
        
        canvas {
            display: block;
            /* 覆盖在照片上 */
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body onload="draw()">
    <img src="7.jpg" alt="" />
    <canvas width="800" height="600"></canvas>
</body>
</html>
  1. 运用canvas绘图的准备
  • 获取画笔
  • 开始路径
  1. 画一个一样大的灰色背景在上面覆盖图片
  function draw() {
            var oCanvas = document.querySelector("canvas");
            if (oCanvas.getContext) {
                var ctx = oCanvas.getContext("2d");
                ctx.beginPath();
                ctx.fillStyle = "gray";
                ctx.fillRect(0, 0, oCanvas.width, oCanvas.height);}
                }
  1. 开始刮图部分
    回顾一下
  • globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。
  • 源图像 = 您打算放置到画布上的绘图。
  • 目标图像 = 您已经放置在画布上的绘图。
  • 这里要运用在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。destination-out
 ctx.globalCompositeOperation = "destination-out";
                // 设置每一次刮开的距离
                ctx.lineWidth = 20;
                ctx.lineCap = 'round'; //改变画笔的样式,圆头
                oCanvas.onmousedown = function(e) {
                    var el = e || window.event;
                    var x = el.offsetX;
                    var y = el.offsetY;
                    // 开始路径
                    ctx.beginPath();
                    // 移动到鼠标按下的地方
                    ctx.moveTo(x, y);
                }
                oCanvas.onmousemove = function(e) {
                    var el = e || window.event;
                    var x = el.offsetX;
                    var y = el.offsetY;
                    // 从按下的地方到移动的地方绘制直线路径 
                    ctx.lineTo(x, y);
                    // 这一块用描边让下面的图片露出来,实现效果
                    ctx.stroke();
                }
                oCanvas.onmouseup = function(e) {
                    // 清除移动事件
                    oCanvas.onmousemove = ''
                }

到这里就基本结束了
让我们先看一下效果图,和随便刮了几下图
在这里插入图片描述

在这里插入图片描述最喜欢的李圣经欧尼
完整代码 欢迎自取

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            width: 100%;
            height: 100%;
        }
        
        img {
            display: block;
            width: 800px;
            height: 600px;
        }
        
        canvas {
            display: block;
            /* 覆盖在照片上 */
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body onload="draw()">
    <img src="7.jpg" alt="" />
    <canvas width="800" height="600"></canvas>
    <script>
        function draw() {
            var oCanvas = document.querySelector("canvas");
            if (oCanvas.getContext) {
                var ctx = oCanvas.getContext("2d");
                ctx.beginPath();
                ctx.fillStyle = "gray";
                ctx.fillRect(0, 0, oCanvas.width, oCanvas.height);
                ctx.globalCompositeOperation = "destination-out";
                // 设置每一次刮开的距离
                ctx.lineWidth = 20;
                ctx.lineCap = 'round'; //改变画笔的样式,圆头
                oCanvas.onmousedown = function(e) {
                    var el = e || window.event;
                    var x = el.offsetX;
                    var y = el.offsetY;
                    // 开始路径
                    ctx.beginPath();
                    // 移动到鼠标按下的地方
                    ctx.moveTo(x, y);
                }
                oCanvas.onmousemove = function(e) {
                    var el = e || window.event;
                    var x = el.offsetX;
                    var y = el.offsetY;
                    // 从按下的地方到移动的地方绘制直线路径 
                    ctx.lineTo(x, y);
                    // 这一块用描边让下面的图片露出来,实现效果
                    ctx.stroke();
                }
                oCanvas.onmouseup = function(e) {
                    // 清除移动事件
                    oCanvas.onmousemove = ''
                }
            }
        }
    </script>
</body>

</html>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值