Question

如果你有一个想法，从这篇文章的代码In javascript , how to reverse y axis of canvas?开始（使用Flip呈现的内容解决方案）我想在100 * 100画布中绘制最后一张图像（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>

如何使用画布重新缩放图像？

1 个答案: