如何重新縮放圖像以使用畫布繪制？

Question

如果您有想法，請從這篇文章的代碼開始在javascript中，如何反轉畫布的y軸？ （使用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>