js canvas实现泡泡龙
目录
- 需求 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://media.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://media.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实现泡泡龙
码云笔记 » js canvas实现泡泡龙