如何将 html 画布转换为图像，然后将该画布绘制到画布上答案

【问题标题】：How to turn an html canvas into an image and then draw that canvas onto the canvas如何将 html 画布转换为图像，然后将该画布绘制到画布上
【发布时间】：2021-11-23 20:43:36
【问题描述】：

我目前正在开发一个 html canvas javascript 游戏，它即将完成，但我想扩大画布以使整个游戏更大。我尝试使用类似的东西

var imgData = ctx.getImageData(0, 0, 300, 500);

ctx.putImageData(imgData,0,0,0,0,360,600)

但是使用这种方法我无法增加图像的大小。最好的方法是什么？

【问题讨论】：

标签： javascript html image canvas rescale

【解决方案1】：

有多种方法可以实现这一点，我尝试过的两种方法是使用 2 个单独的画布，putImageData 有点奇怪，并且不适用于放大，我建议使用单独的canvas，放大版的大小，然后使用 ctx.drawImage 在放大版上绘制第一张画布：

var c = document.getElementById('c');
var ctx = c.getContext('2d');

var c2 = document.getElementById('c2');
var ctx2 = c2.getContext('2d')

ctx.fillStyle = "red";
ctx.fillRect(10,10,100,100)

var scaleX = c2.width / c.width;
var scaleY = c2.height / c.height;

ctx2.drawImage(c,0,0,c2.width,c2.height)

canvas{
  border: 2px solid black
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <canvas id="c" width="200" height="200"></canvas>
    <canvas id="c2" width="400" height="400" ></canvas>
    <script src="script.js"></script>
  </body>
</html>

另一种方法是放大上下文，然后在 0,0 处绘制图像，不指定宽度或高度：

var c = document.getElementById('c');
var ctx = c.getContext('2d');

var c2 = document.getElementById('c2');
var ctx2 = c2.getContext('2d')

ctx.fillStyle = "red";
ctx.fillRect(10,10,100,100)

var scaleX = c2.width / c.width;
var scaleY = c2.height / c.height;

ctx2.scale(scaleX,scaleY)
ctx2.drawImage(c,0,0)
ctx2.scale(1/scaleX,1/scaleY)

canvas{
  border: 2px solid black
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <canvas id="c" width="200" height="200"></canvas>
    <canvas id="c2" width="400" height="400" ></canvas>
    <script src="script.js"></script>
  </body>
</html>

另一种选择是使用 css scale() 标记，但这会与鼠标点击相混淆，而且真的很烦人，所以我不会那样做。请记住，所有放大画布的方法（除非您放大坐标和重绘）都会导致模糊。

希望这会有所帮助：D

【讨论】：