码云前端 2021-05-26

js canvas实现泡泡龙

AI 概述

用到的素材代码时间将图片绘制到 canvas 中：获取并裁剪画布的点阵信息通过点阵信息生成气泡 dom 需求 1：气泡要浮动（css 动画，easy）需求 2：气泡组成一条龙用到的素材先用图片搜索找一张龙的剪影泡泡素材泡泡是透明的，所以大家看不见，不过没关系，后面我会附上下载链接代码时间将图片...

文章目录隐藏

用到的素材
代码时间

将图片绘制到 canvas 中：
获取并裁剪画布的点阵信息

通过点阵信息生成气泡 dom

需求 1：气泡要浮动（css 动画，easy）
需求 2：气泡组成一条龙

用到的素材

先用图片搜索找一张龙的剪影

泡泡素材

泡泡是透明的，所以大家看不见，不过没关系，后面我会附上下载链接

代码时间

将图片绘制到 canvas 中：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "dragon.jpg";
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;

    ctx.drawImage(image,0,0);
}

获取并裁剪画布的点阵信息

var imageData = ctx.getImageData(0,0,image.width,image.height).data;
ctx.fillStyle = "#ffffff";
ctx.fillRect(0,0,image.width,image.height);

var gap = 6;

for (var h = 0; h < image.height; h+=gap) {
    for(var w = 0; w < image.width; w+=gap){
        var position = (image.width * h + w) * 4;
        var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

        if(r+g+b==0){
            ctx.fillStyle = "#000";
            ctx.fillRect(w,h,4,4);
        }
    }
}

现在我们获得了这样一条龙的点阵信息

通过点阵信息生成气泡 dom

var dragonContainer = document.getElementById("container");
var dragonScale = 2;

for (var h = 0; h < image.height; h+=gap) {
    for(var w = 0; w < image.width; w+=gap){
        var position = (image.width * h + w) * 4;
        var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

        if(r+g+b==0){
            var bubble = document.createElement("img");
            bubble.src = "bubble.png";
            bubble.setAttribute("class","bubble");

            var bubbleSize = Math.random()*10+20;
            bubble.style.left = (w*dragonScale-bubbleSize/2) + "px";
            bubble.style.top = (h*dragonScale-bubbleSize/2) + "px";
            bubble.style.width = bubble.style.height = bubbleSize+"px";
            bubble.style.animationDuration = Math.random()*6+4 + "s";

            dragonContainer.appendChild(bubble);
        }
    }
}

所有源码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML 龙</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            background: #333;
        }

        .bubble {
            position: absolute;
            animation-timing-function: linear;
            animation-name: floating;
            animation-iteration-count: infinite;
        }

        @keyframes floating {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-5px);
            }

            100% {
                transform: translateY(0px);
            }
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            init();
        }

        function init() {
            drawDragonImageInCanvas();
        }

        function drawDragonImageInCanvas(cb) {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            var image = new Image();
            image.crossOrigin = '';
            image.src = "https://mybj123.com/wp-content/uploads/2021/05/1621998251-8621ffdbc569882.jpg";
            image.onload = function () {
                canvas.width = image.width;
                canvas.height = image.height;

                ctx.drawImage(image, 0, 0);

                var imageData = ctx.getImageData(0, 0, image.width, image.height).data;

                ctx.clearRect(0, 0, image.width, image.height);

                var gap = 10;

                var dragonContainer = document.getElementById("container");
                var dragonScale = 2;

                for (var h = 0; h < image.height; h += gap) {
                    for (var w = 0; w < image.width; w += gap) {
                        var position = (image.width * h + w) * 4;
                        var r = imageData[position],
                            g = imageData[position + 1],
                            b = imageData[position + 2];

                        if (r + g + b == 0) {
                            var bubble = document.createElement("img");
                            bubble.src = "https://mybj123.com/wp-content/uploads/2021/05/1621998248-a3fa9e0b6b24b1c.png";
                            bubble.setAttribute("class", "bubble");

                            var bubbleSize = Math.random() * 10 + 20;

                            bubble.style.left = (w * dragonScale - bubbleSize / 2) + "px";
                            bubble.style.top = (h * dragonScale - bubbleSize / 2) + "px";

                            bubble.style.width = bubble.style.height = bubbleSize + "px";

                            bubble.style.animationDuration = Math.random() * 6 + 4 + "s";

                            dragonContainer.appendChild(bubble);
                        }
                    }
                }
            }
        }
    </script>
</head>

<body>
    <div id='container' style="width: 100%;height: 100%;position: absolute;z-index: 2;"></div>
    <canvas id='canvas' style="position: absolute;z-index: 1;filter: blur(5px);"></canvas>
</body>

</html>

以上关于js canvas实现泡泡龙的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » js canvas实现泡泡龙