如何将 html 画布转换为图像，然后将该画布绘制到画布上
[英]How to turn an html canvas into an image and then draw that canvas onto the canvas
问题描述
我目前正在开发一个 html canvas javascript 游戏，它刚刚完成，但我想放大画布，使整个游戏更大。 我尝试使用类似的东西
var imgData = ctx.getImageData(0, 0, 300, 500);
ctx.putImageData(imgData,0,0,0,0,360,600)
但是使用这种方法我无法增加图像的大小。 最好的方法是什么？
1 个解决方案
解决方案1
0 2021-10-27 21:34:56
有多种方法可以实现这一点，我尝试过的两种方法将使用 2 个单独的画布， putImageData 有点奇怪，并且不能很好地扩展，我建议的是有一个单独的画布，放大版的大小，然后使用 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
无法在画布上绘制图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.