javascript - 如何重新缩放图像以使用 Canvas 绘制？

Question

如果你有想法，从这篇文章的代码开始In javascript , how to reverse y axis of canvas? (使用 Flip 渲染内容解决方案)我想在 100*100 Canvas 上绘制最后一个图像(200*200)，使用 ctx.drawImage(ctx.canvas,0,0,200,200,0,0,100,100) 重新缩放它，但它只会裁剪它问候

Answer 1

在绘制之前将上下文缩放 0.5。

ctx.scale(0.5,0.5)

var i,j;
const n = 200;
const size = n ** 2;  // ** is to power of
//const canvas = document.querySelector('canvas'); // not needed canvas is 
                                                   // already defined with 
                                                   // id="canvas"
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(n, n);
const Z = [];
for (j = 0; j < size; j ++) { Z[j] = j * 256 / size }
Z[n * n - 1] = 0;
i = 0;
for (j = 0; j < size; j++) {
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = 255;
}
ctx.putImageData(imgData, 0, 0);
ctx.scale(0.5,0.5);
// flip the canvas
ctx.transform(1, 0, 0, -1, 0, canvas.height)
ctx.globalCompositeOperation = "copy"; // if you have transparent pixels
ctx.drawImage(ctx.canvas,0,0);
ctx.globalCompositeOperation = "source-over"; // reset to default

<canvas id="canvas" width=200 height=200></canvas>