Html5 canvas 通过js放大画布会导致内容丢失吗？

这是一个图像编辑器，我正在工作，但它有一个错误。假设您创建了一个15倍缩放的图像，当您更改缩放时，图像将丢失。为什么会这样？补救办法是什么

HTML:

---

提前感谢

如果你想放大画布，这意味着你必须用缩放重新绘制

因此，与其在画布上绘制像素，不如在画布上单击鼠标右键，画布由纯像素组成。。。您需要首先创建像素网格的一些表示形式

var gridOfPixels = [];

假设您现在对静态大小没有问题。设为8x8像素。开始时，您希望初始化阵列：

for (var i=0; i < 8*8; i++) gridOfPixels[i] = 0;

现在，每次调整画布大小或更改某些变量时，原始画布内容都将保存在网格中，您可以在需要时随时使用renderGrid（）。你甚至可以实时完成，比如给像素的颜色设置动画等等

---

玩得开心。：）

更改其宽度/高度/缩放后，必须重新绘制。因此，您必须将有关像素的信息存储在某个位置，而不是在单击时绘制像素，您将首先存储信息，然后重新绘制所有像素。如果大小发生变化，您将重新绘制所有像素。我会将其作为答案发布，因为此处的代码无法读取。现在可以接受或关闭该问题吗？对不起！：）我已经接受了你的回答

var gridOfPixels = [];

for (var i=0; i < 8*8; i++) gridOfPixels[i] = 0;

function renderGrid() {
    for (var y=0; y < 8; y++)
        for (var x=0; x < 8; x++)
            renderPixel( x, y, gridOfPixels[x+y*8] );
}

$('#my-canvas').click(function(e) {
    var x = ...;
    var y = ...;  // calculate the position of pixels from mouse position inside canvas
    // dont forget to check that x,y are in the 0-7 range
    // dont forget to convert x,y to whole number using parseInt()
    gridOfPixels[x+y*8] = 1;
    renderGrid();  // update the grid canvas
});