本文若对你有用,给个免费 Star 和关注,持续输出前端各种稀奇古怪的问题
这两天学了一下canvas,用气泡画自己(的名字), 做为练习的小demo, 对代码进行了详细的注释
所实现的效果如图
气泡.gif
代码如下,注释齐全, 粘贴即用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>顾成才</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style type="text/css">
html,
body { width: 100%; height: 100%; position: relative; margin: 0; padding: 0; background: #333; }
.container { width: 100%;height: 100%;position: absolute;z-index: 2; }
.canvas { width: 100%;height: 100%; position: absolute;z-index: 1;filter: blur(5px);left: 50%; top: 50%; transform: translate(-50%, -50%); }
.bubble { position: absolute; animation-timing-function: linear; animation-name: floating; animation-iteration-count: infinite; }
.btn-box { width: 100%; height: 100%; }
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="form-inline row">
<input id="input1" type="text" class="form-control" style="width: 200px" placeholder="文字(不限,气泡)">
<div class="glyphicon glyphicon-plus" style="color: white;"></div>
<input id="input2" type="number" class="form-control" style="width: 200px" placeholder="文字大小(数字,80)">
<div class="glyphicon glyphicon-plus" style="color: white;"></div>
<input id="input5" type="text" class="form-control" style="width: 200px" placeholder="字体(不限,楷体)">
<div class="glyphicon glyphicon-plus" style="color: white;"></div>
<input id="input6" type="number" class="form-control" style="width: 200px" placeholder="气泡大小(数字, 20)">
<div class="glyphicon glyphicon-plus" style="color: white;"></div>
<input id="input3" type="number" class="form-control" style="width: 200px" placeholder="气泡图大小(数字, 5)">
<div class="glyphicon glyphicon-plus" style="color: white;"></div>
<input id="input4" type="number" class="form-control" style="width: 200px" placeholder="气泡稀疏程度(数字, 2)">
<button type="button" class="btn btn-info" onclick="editConfig()">修改</button>
</div>
<div id='container'></div>
<canvas id='canvas'></canvas>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
drawDragonImageInCanvas();
}
function drawDragonImageInCanvas(text,fontSize, bubbleNum, bubbleBig, thick, fontFamily) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000"
console.log('', (fontSize||'80') + "px"+ (fontFamily||'楷体'));
ctx.font = (fontSize||'80') + "px "+ (fontFamily||'楷体');
ctx.fillText(text||'气泡', 10, 140);
// getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
let arr = []
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 10像素以内相同黑点为一个气泡 gap 越大,气泡越2稀疏
var gap = thick||3;
var dragonContainer = document.getElementById("container");
dragonContainer.innerHTML = ''
// // 放大 dragonScale 越大气泡图越大
var dragonScale = bubbleNum||5;
for (var h = 0; h < canvas.height; h += gap) {
for (var w = 0; w < canvas.width; w += gap) {
// imageData 数组,按顺序每四个一组 r g b a
// position 为第一层 w*4, 第二层 (canvas.width + w)*4
var position = (canvas.width * h + w) * 4;
var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];
// 纯黑色, 即rgb(0,0,0)
if (imageData[position + 3]!==0) {
var bubble = document.createElement("img");
bubble.src = "https://upload-images.jianshu.io/upload_images/24042207-fd685c9a66faa4bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240";
// 设置 气泡标签 的 bubble 类
bubble.setAttribute("class", "bubble");
// 气泡大小 20-30px
var bubbleSize = Math.random() * 10 + (~~bubbleBig||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
dragonContainer.appendChild(bubble);
}
}
}
}
function editConfig(){
let input1 = document.getElementById('input1').value
let input2 = document.getElementById('input2').value
let input3 = ~~document.getElementById('input3').value
let input4 = ~~document.getElementById('input4').value
let input5 = document.getElementById('input5').value
let input6 = document.getElementById('input6').value
drawDragonImageInCanvas(input1,input2, input3, input6, input4, input5)
}
</script>
</html>
