后端开发教程 - Java、Spring Boot 实战 - msg200.com
让像素艺术的速度提高 10 倍✨💫
box-shadow 的问题
答案就在 CANVAS 中
步骤 3：定义数组
步骤 4：填充画布
你再也不用使用 box-shadows 了
所以这篇文章会简短易懂，方便你掌握这项技术，开始创作精美的像素画！
在发现这个技巧之前，我曾经用过 制作像素画box-shadow，真是太痛苦了！只能复制粘贴数值，然后一遍又一遍地修改。
如果你不熟悉如何使用 box-shadows 制作像素画，我先简单介绍一下。box-shadowsbox-shadow是 CSS 中的一个属性，用于将一个或多个阴影附加到应用该阴影的元素上。所以，如果你想制作像素画，只需创建一个小盒子，然后在屏幕周围不同位置定义（大量）box-shadows，这样你就能创造出类似像素画的漂亮效果。
box-shadow 的问题
现在你或许也能看出问题所在，box-shadow那就是纯粹的工作量。box-shadow一遍又一遍地定义每个元素实在是太费劲了！现在你可能会想，既然已经有像Jhey Tompkin 的 pxl这样的软件了，为什么还要费心用代码制作像素画呢？我的答案是创造力。纯 CSS 画作、一个 div 画作、无 div 画作以及像素画作等，其目的并非为了任何生产目的，而是为了展现你的个性、创造力和想象力，在这个过程中，你能更清晰地学习到更深层次的概念！
答案就在 CANVAS 中
如果box-shadow太麻烦，就用画布吧！我总是会用到一张参考图片。本文就用这张图片。
基本思路是：我们将使用 JavaScript 中的 Canvas API，并通过创建一个二维数组来定义像素，该数组的每一行都会完美地映射像素值。然后，我们将使用嵌套的 for 循环填充 Canvas，并从数组中获取值，并逐个像素地填充 Canvas。这比 box-shadows 技术要快得多！
现在让我一步一步地向您展示如何做到这一点。
步骤 1：设置画布
在您的 HTML 中制作任意大小的画布。
<canvas height="500" width="500" id="board">
</canvas>
第 2 步：设置变量
我们需要创建一些变量，用于定义像素大小和艺术创作所需的颜色。我们将在 JS 文件中执行这些操作。
var pixelSize = 15;
var _ = "transparent",
b = "#000000",
o = "orange",
p = "hotpink";
步骤 3：定义数组
现在，我们需要根据参考图像将这些颜色值填充到数组中。只需计算每行和每列需要多少像素，然后相应地创建网格即可。
这里我们需要一个 30 x 30 像素的网格，因此我们将定义一个每列包含 30 个颜色值的数组，并创建 30 行。
var image = [
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, b, b, b, b, _, _, _, _, _, _, _, _, _, _, _, b, b, b, b, _, _, _, _, _, _],
[_, _, _, b, o, o, o, o, b, _, _, _, _, _, _, _, _, _, b, o, o, o, o, b, _, _, _, _, _],
[_, _, b, p, b, b, o, o, o, b, _, _, _, _, _, _, _, b, o, o, o, b, b, p, b, _, _, _, _],
[_, _, b, p, p, p, b, o, o, b, b, b, b, b, b, b, b, b, o, o, b, p, p, p, b, _, _, _, _],
[_, _, b, p, p, p, b, o, o, o, o, o, o, o, o, o, o, o, o, o, b, p, p, p, b, _, _, _, _],
[_, _, b, p, p, b, o, o, o, o, o, o, o, o, o, o, o, _, _, _, _, b, p, p, b, _, _, _, _],
[_, _, _, b, b, o, o, o, o, o, o, o, o, o, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _],
[_, _, _, _, b, o, o, b, b, b, o, o, _, _, _, _, _, b, b, b, _, _, b, _, _, _, _, _, _],
[_, _, _, _, b, o, b, b, _, _, b, _, _, _, _, _, b, _, _, b, b, _, b, _, _, _, _, _, _],
[_, _, _, b, o, o, b, b, _, _, b, _, _, _, _, _, b, _, _, b, b, _, _, b, _, _, _, _, _],
[_, _, _, b, _, _, b, _, b, b, b, _, _, _, _, _, b, b, b, _, b, _, _, b, _, _, _, _, _],
[_, _, _, b, b, _, _, b, b, b, _, _, _, _, _, _, _, b, b, b, _, _, b, b, _, _, _, _, _],
[_, _, _, b, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _],
[_, _, _, b, b, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _],
[_, _, _, b, _, _, _, _, _, _, b, _, _, b, _, _, b, _, _, _, _, _, _, b, _, _, _, _, _],
[_, _, _, _, b, _, _, _, _, _, _, b, b, _, b, b, _, _, _, _, _, _, b, _, _, _, _, _, _],
[_, _, _, _, b, b, o, o, _, _, _, _, _, _, _, _, _, _, o, o, b, b, b, _, _, _, _, _, _],
[_, _, _, _, b, o, o, _, _, b, _, _, _, _, _, _, _, b, _, _, o, o, b, _, _, _, _, _, _],
[_, _, _, _, b, o, o, _, p, p, b, _, _, _, _, _, b, p, p, _, o, o, b, _, _, _, _, _, _],
[_, _, _, _, b, o, _, b, p, p, b, _, _, _, _, _, b, p, p, b, _, o, b, _, _, _, _, _, _],
[_, _, _, _, b, _, _, _, b, b, _, _, _, _, _, _, _, b, b, _, _, _, b, _, _, _, _, _, _],
[_, _, _, _, _, b, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _, _, _],
[_, _, _, _, _, _, b, _, _, _, b, b, b, b, b, b, b, _, _, _, b, _, _, _, _, _, _, _, _],
[_, _, _, _, _, b, p, p, b, b, _, _, _, _, _, _, _, b, b, p, p, b, _, _, _, _, _, _, _],
[_, _, _, _, _, _, b, b, _, _, _, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _]];
它看起来像一个很大的数组，但是相信我，如果你知道用盒子阴影制作像素艺术的痛苦，这肯定会有很大帮助！
步骤 4：填充画布
剩下要做的就是通过应用嵌套for循环来填充画布，并用数组中的颜色填充像素。
var canvas = document.getElementById('board');
var ctx = canvas.getContext('2d');
ctx.lineWidth = .25;
for(var i=0;i<29;i++) {
for(var j=0;j<29;j++) {
ctx.fillStyle = image[j][i];
ctx.fillRect(i*pixelSize, j*pixelSize, pixelSize, pixelSize);
}
}
定位画布并添加一些样式后，完成的艺术品看起来如下：
就这样！现在我要你创作你的像素艺术作品，并向全世界展示它！
鏂囩珷鏉ユ簮锛�https://dev.to/rjitsu/make-pixel-art-10x-faster-5ck