如何将 html 画布转换为图像，然后将该画布绘制到画布上
Posted
技术标签:
【中文标题】如何将 html 画布转换为图像，然后将该画布绘制到画布上【英文标题】：How to turn an html canvas into an image and then draw that canvas onto the canvas 【发布时间】：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)
但是使用这种方法我无法增加图像的大小。最好的方法是什么？
【问题讨论】：
【参考方案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" ></canvas>
<canvas id="c2" ></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" ></canvas>
<canvas id="c2" ></canvas>
<script src="script.js"></script>
</body>
</html>另一种选择是使用 css scale() 标记，但这会与鼠标点击相混淆，而且真的很烦人，所以我不会那样做。请记住，所有放大画布的方法（除非您放大坐标和重绘）都会导致模糊。
希望这会有所帮助：D
【讨论】：
以上是关于如何将 html 画布转换为图像，然后将该画布绘制到画布上的主要内容，如果未能解决你的问题，请参考以下文章