canvas实现类似弹窗广告效果

Posted 2020-07-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas实现类似弹窗广告效果相关的知识，希望对你有一定的参考价值。

先看看下面的效果图，想想使用canvas是怎样实现的？

如下图：

技术分享

这个就不详细描述了，看代码就会了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style type="text/css">
        #canvas {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "red";
    ctx.fillRect(0,0,80,50);

    var speedX = 1,
        speedY = 2,
        i1 = 0,
        i2 = 0;
        w = 80,
        h = 50,
        dirX = true,
        dirY = true;
    function run() {
        
        if(dirX) {
            i1++;
        }else {
            i1--;
        }
        if(dirY) {
            i2++;
        }else {
            i2--;
        }
        //清除画布
        ctx.clearRect(0,0,400,400);

        //判断边界
        if(i1*speedX > (canvas.width - w)) {
            dirX = false;
        }else if(i1*speedX < 0){
            dirX = true;
        }

        if(i2*speedY > (canvas.height - h)) {
            dirY = false;
        }else if(i2*speedY < 0) {
            dirY = true;
        }
        //绘制矩形
        ctx.fillRect(i1*speedX,i2*speedY,w,h);
        window.requestAnimationFrame(run);
    }
    window.requestAnimationFrame(run);
    </script>
</body>
</html>

以上是关于canvas实现类似弹窗广告效果的主要内容，如果未能解决你的问题，请参考以下文章

原生JS实现各种经典网页特效——Banner图滚动选项卡切换广告弹窗等