Canvas 和 SVG 之间的犹豫不决

Indecision between Canvas and SVG

本文关键字：犹豫不决 之间 SVG Canvas      更新时间：2023-09-26

我的一个朋友需要一个呈现 32x32 黑色矩形集的小应用程序。单击其中一个时，它需要切换到白色矩形。然后，通过更改这些框的颜色创建的图像需要导出为 png 或 jpg。

我很确定我可以使用 Canvas 来做到这一点，但现在我的网格在工作，我突然意识到我完全不知道如何实际让交互工作，或者是否有可能让它工作。

我可以使用 SVG 来完成此任务吗？我知道 Canvas 有一个导出画布上显示的内容的功能，但如果没有交互，它就毫无用处。

我的最佳选择是什么？真的能做到吗？

这显示了如何使用画布管理简单的交互：制作一个 32 x 32 的数组，显示矩形是否已打开。当用户单击画布时，计算鼠标所在的矩形并切换它。

对于更复杂的交互，您需要存储绘制的每个形状的坐标，然后重绘整个画布，以确保正确处理重叠的形状。

JSfiddle

var canvas = document.getElementById('rectangles'),
    context = canvas.getContext('2d'),
    rectangles = [],
    rectWidth = canvas.width / 32,
    rectHeight = canvas.height / 32;
function makeRectangles() {
    var x, y, row;
    for (y = 0; y < 32; y++) {
        row = [];
        for (x = 0; x < 32; x++) {
            row.push(true);
            drawRectangle(x, y, true);
        }
        rectangles.push(row);
    }
}
function drawRectangle(x, y, black) {
    context.strokeStyle = 'cyan';
    context.fillStyle = black ? 'black' : 'white';
    context.beginPath();
    context.rect(x * rectWidth, y * rectHeight, rectWidth, rectHeight);
    context.fill();
    context.stroke();
}
function canvasClick(ev) {
    var x = Math.floor((ev.pageX - canvas.offsetLeft) / rectWidth),
        y = Math.floor((ev.pageY - canvas.offsetTop) / rectHeight);
    rectangles[y][x] = !rectangles[y][x];
    drawRectangle(x, y, rectangles[y][x]);
}
makeRectangles();
canvas.addEventListener('click', canvasClick);
相关文章：