javascript - Canvas 和 SVG 之间犹豫不决

Question

我的一个 friend 需要一个小应用程序来渲染一组 32x32 的黑色矩形。单击其中之一时，它需要切换到白色矩形。通过更改这些框的颜色创建的图像需要导出为 png 或 jpg。

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

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

我最好的选择是什么？真的可以做到吗？

Answer 1

这展示了如何使用 Canvas 管理简单的交互:创建一个 32 x 32 数组来显示矩形是否打开。当用户单击 Canvas 时，计算鼠标位于哪个矩形上方并切换它。

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

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);