HTML5 <canvas> 元素上像素之间的网格线

Question

在学习 JS 的同时，我正在开发一个简单的像素艺术程序，就像一个有趣的项目。我想让 canvas 上的每个像素都被 1px 的边框包围。我唯一的想法是创建一个覆盖网格并调整其大小以适合 canvas 像素。如：

<div 
  class="grid" 
  style="width: (canvas width); height: (canvas height); background-image: (transparent image with 1px border); background-size: (size of each canvas pixel); pointer-events: none;"
></div>
<br>

并将其放置在 canvas 上。

Answer 1

如果你想要 border/outline 围绕你的 Canvas，试试这个：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Answer 2

在内存中使用很多canvas层

最简单的方法是将绘图保存在单独的 canvas 上。使用主要 canvas 仅作为最终显示。

一旦您将绘图与显示分开canvas，您就可以开始对视觉效果进行分层了。

复制图像（canvas、jpeg、png 等...）

要绘制像素艺术图像的轮廓，请创建图像的 draw-able 副本。

function copyImage(image){
    const copy = document.createElement("canvas");
    copy.width = image.width;
    copy.height = image.height;
    copy.ctx = copy.getContext("2d");
    copy.ctx.drawImage(image);
    return copy;
}

创建空白canvas层

function createImage(w, h){
    const img = document.createElement("canvas");
    img.width = w;
    img.height = h;
    img.ctx = img.getContext("2d");
    return img;
}

轮廓层

在其自身上向左绘制 1 个像素，向右绘制 1 个像素，在上方绘制 1 个像素，在下方绘制 1 个像素。然后设置外线颜色

function outlineLayer(image, color) {
    const ctx = image.ctx;
    ctx.globalCompositeOperation = "source-over";
    ctx.drawImage(image, -1,  0);
    ctx.drawImage(image,  1,  0);
    ctx.drawImage(image,  0, -1);
    ctx.drawImage(image,  0,  1);

    ctx.fillStyle = color;
    ctx.globalCompositeOperation = "source-atop";
    ctx.fillRect(0,0, image.width, image.height);

    ctx.globalCompositeOperation = "source-over";
}

渲染

当你渲染图像时，你首先在图像之前绘制轮廓层。

使用上面的函数

// ctx is the context of the visual (on page) canvas
// myArt is a drawing. It is a canvas that is kept in memory and not on the page.
const outline = copyImage(myArt);
outlineLayer(outline, "black");

// then draw both on the main canvas
// First outline
ctx.drawImage(outline, 0, 0);
// then the pixels
ctx.drawImage(myArt, 0, 0);

折叠图层

您也可以折叠图层使轮廓永久化

ctx.globalCompositeOperation = "destination-over";
myArt.ctx.drawImage(outline, 0, 0);
ctx.globalCompositeOperation = "source-over"; // restore default

HTML5 <canvas> 元素上像素之间的网格线

Gridlines Between Pixels on HTML5 <canvas> Element

html

javascript

css

canvas

pixel

在内存中使用很多canvas层

复制图像（canvas、jpeg、png 等...）

轮廓层

渲染

折叠图层