JavaScript+Canvas创建一个独特的字符画生成器
作者：_XU
在本篇文章中，我将分享如何使用 Canvas 和 JavaScript 创建一个独特的字符画生成器。通过此生成器，我们可以将图片转换为由字符构成的作品，并通过一些JavaScript属性让这些字符动起来。结合现代的 Web 技术，我们在网页上动态地生成字符画，并且通过添加一些动画效果，使其更富有趣味性。
准备工作
首先，我们需要一些基础的 HTML 结构和 JavaScript 代码，用于加载图片并创建 Canvas。
<body>
<div class="glass">
<img id="myImg" src="./xxx.png" style="display: none;"></img>
<div id="canvasDiv">
<canvas id="canvas" width="600" height="600" style="display: none;"></canvas>
</div>
<div id="textDiv" class="textDiv" style="line-height: 0.9;"></div>
</div>
<script>
// ...（后续代码将在下文详细介绍）
</script>
</body>
图片和canvas都不需要展示，设置它们为display: none;
图片加载与转换
在 window.onload 事件中，我们加载图片并将其绘制到 Canvas 上。为了保持生成的字符画不失真，我们需要进行一些调整。
window.onload = () => {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
const img = document.querySelector('#myImg');
changeImg(img);
let newimgText = imgText.split('</br>').map((e) => "<div class='amiDiv' style='display:flex'>" + e + "</div>") .join('');
document.getElementById("textDiv").innerHTML = newimgText;
};
首先获取canvas标签，并且创建一个2D渲染上下文ctx，以便后续使用。接下来，该代码获取图片，并且将其作为参数传递给changeImg函数，该函数将会对这个图片进行处理，将其转换为字符画并将结果存储在全局变量imgText中。然后，定义新的字符串变量newimgText，将imgText字符串每一行分隔开，方便一会儿分别给每一行添加动态效果。
Canvas 操作与字符生成
在 changeImg 函数中，我们使用 Canvas 获取图片像素信息，并逐个读取每个像素的RGB值，计算出对应的灰度值并映射到字符上。同时，我们也可以调整字符大小控制显示图像的精度。
function changeImg(img) {
// 清空字符画
imgText = "";
// 先记录比率,如果宽，那么先缩放宽,再用比率算出长,反之同理，这里是保证不超过不超过设定规模
let rate = img.width / img.height;
if (rate > 1) {
img.style.width = IMAGE_SIZE + 'px';
img.style.height = IMAGE_SIZE / rate + 'px';
img.width = IMAGE_SIZE;
img.height = IMAGE_SIZE / rate;
} else {
img.style.height = IMAGE_SIZE + 'px';
img.style.width = IMAGE_SIZE * rate + 'px';
img.height = IMAGE_SIZE;
img.width = IMAGE_SIZE * rate;
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
// 将图片绘制在canvas上
ctx.drawImage(img, 0, 0, img.width, img.height);
// 获取像素信息
let pixelInfo;
try {
pixelInfo = ctx.getImageData(0, 0, img.width, img.height);
} catch {
console("图片有问题！");
}
// 数值越小，精度越高
let size = 2;
// 设置zoom缩放
document.querySelector("#textDiv").style.zoom = size / 6;
// 生成主体，逐个读取字符
for (let i = 0; i < img.height; i = i + size) {
for (let j = 0; j < img.width; j = j + size) {
const curPoint = (i * img.width + j) * 4; // ×4是因为，1为r，2为g，3为b，4为a，四个是一组rgba值
const [r, g, b] = pixelInfo.data.slice(curPoint, curPoint + 3);
const gray = r * 0.3 + g * 0.6 + b * 0.1; // 计算灰度值
const color = `rgba(${r},${g},${b})`; // 保存像素点rgb值
toText(gray, color)
}
imgText += "</br>";
}
}
拼接字符画
将字符拼接成一行一行的文本。
function toText(g, color) {
if (color) imgText += `<span style='color:${color}'>`;
if (g == 255) imgText += " ";
else imgText += "@";
if (color) imgText += "</span>";
}
添加动态效果
最后，使用JavaScript的正弦函数来控制每个文字元素的位置和偏移量，从而实现字符画龙在页面上的动态效果。
const container = document.querySelectorAll(".amiDiv");
// 创建曲线运动
function createCurve(func, range) {
container.forEach(e => {
const points = getCurvePoints(func, range, e.children.length, e.clientWidth);
for (let i = 0; i < points.length; i++) {
e.children[i].style.transform = `translateY(${points[i]}px)`;
}
});
}
let offset = 0;
createCurve((x) => Math.sin(x), [offset, offset + 2 * Math.PI]);
setInterval(() => {
offset += 0.1;
createCurve((x) => Math.sin(x), [offset, offset + 2 * Math.PI]);
}, 30);
// 辅助函数：获取曲线上的点
function getCurvePoints(curveFunc, range, number, xLength) {
if (number < 1) {
return [];
}
if (number === 1) {
return [0];
}
const piece = (range[1] - range[0]) / (number - 1);
const result = [];
const scale = xLength / (range[1] - range[0]);
for (let i = 0; i < number; i++) {
result.push(-curveFunc(i * piece + range[0]) * scale);
}
return result;
}
在这个龙年，愿我们的代码如同神龙一般威猛，技术如同飞龙一般翱翔，最后祝大家新的一年：龙行龘龘，前程朤朤！
到此这篇关于JavaScript+Canvas创建一个独特的字符画生成器的文章就介绍到这了,更多相关JavaScript Canvas字符画生成器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！