使用Canvas动画来制作一个滑动遮罩效果

最新推荐文章于 2021-06-02 20:20:25 发布

油墨风景秋卷画

最新推荐文章于 2021-06-02 20:20:25 发布

阅读量928

点赞数 1

分类专栏： canvas 简单文章标签： canvas 遮罩动画

本文链接：https://blog.csdn.net/weixin_43686133/article/details/90236477

版权

canvas 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

简单

2 篇文章 0 订阅

订阅专栏

话不多说，先上源码
代码之后是分析
js

var speed = 0.5
    var img1 = {
        w: 150,
        h: 30,
        x: 0,
        y: 0
    }

    function fun() {
        console.log(1) //检测是否运行动画
        var ctx = document.getElementById("cav").getContext("2d"); //获取到画笔
        var img = new Image() //新建作为底片的图片
        img.src = "20190513135530.png" //可以传参
        ctx.clearRect
        ctx.save()
        img.onload = function() {
            ctx.drawImage(img, 50, 50) //三个值都传参  ，XY坐标
            ctx.globalCompositeOperation = "destination-in"
            ctx.fillStyle = "red"
            ctx.fillRect(img1.x += 1 * speed, img1.y, img1.w -= 1 * speed, img1.h) //遮罩位置，速度，可以传参
            ctx.fill()
            ctx.stroke();
            ctx.restore()
        }
        if (img1.w == 0) {

        } else {
            requestAnimationFrame(fun)

        }
    }

    requestAnimationFrame(fun)

html

<body>
    <canvas id="cav" width="500" height="500">
       请换一个浏览器
   </canvas>
    <img src="20190513135530.png" alt="">
</body>

首先！！！
使用画笔工具的一项属性 globalCompositeOperation
用来进行设置两张图像重叠的样式，具体效果请戳
转载自 https://www.cnblogs.com/hzj680539/p/5068487.html
这里我们使用destination-in属性进行绘制

首先！

我们使用一张图片当做底片，请自行设置

img.src = "20190513135530.png"

在img.onolad中进行接下来的操作

img1中放着的是我们后画上去的矩形，通过 globalCompositeOperation=“destination-in”
的效果来进行，原图只显示与后画上去的矩形重叠的部分

没了

油墨风景秋卷画

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Canvas动画来制作一个滑动遮罩效果

话不多说，先上源码代码之后是分析jsvar speed = 0.5 var img1 = { w: 150, h: 30, x: 0, y: 0 } function fun() { console.log(1) //检测是否运行动画 var ctx = document...
复制链接

扫一扫