如何將 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.