HTML5 Canvas縮放/縮放更大2D世界的視圖框？

我想學習如何使用畫布，這樣我就可以在業餘時間嘗試創建Web應用程序和網頁遊戲。我喜歡可以在頁面上繪製對象的事實。無論如何，我想知道如何讓畫布變得非常大，然後放大到某個點，然後動態移動該視圖框與播放器。我也想知道如何實現放大和縮小。HTML5 Canvas縮放/縮放更大2D世界的視圖框？

差不多就是我想說的是我怎麼可以創建一個2D的「世界」就像http://www.agar.io/

我似乎有問題是，我可以創建畫布佔據整個頁面，但我如何設置它以便畫布顯示另一個更大的世界的一部分？並且可以像這個更大的世界中的取景器一樣動態地移動。

我已經嘗試谷歌搜索，但當尋找縮放大多數東西都是與縮放其他設備和他們的決議畫布。

此刻我將使用HTML5畫布，JS & jQuery使用canvas進行實驗，還有其他任何我應該知道的事情嗎？

感謝您的幫助。

來源

2015-07-21 Andrew89898

任何應用程序的'相機'只是繪圖上下文。假設你有你的：

canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d");

您可以通過使用translate()方法移動您的視圖。

這裏是一個的jsfiddle解釋攝像機的運動：https://jsfiddle.net/0o2nsc18/

移動相機的小提琴，點擊輸出窗口內，使用箭頭鍵移動相機。

來源

2015-07-22 19:36:57 user2072826

嗨，這是很好的信息你的JSFiddle顯示正是我想要的，理想情況下，我想有一個網格，佔用頁面的全尺寸然後被翻譯。我正在努力做到這一點，但我無法完成這項工作。我已經添加了鼠標事件，並嘗試了你的setInterval函數，但似乎沒有任何工作，我已經有畫布和上下文變量。謝謝你的幫助。 – Andrew89898

https://jsfiddle.net/0o2nsc18/1/ – user2072826

是的，這是我想要的，但我希望網格在各個方向上都可以達到邊界，如agar.io. 我無法理解翻譯時的翻譯方式，因爲它意味着您沒有真正翻譯。您正在移動然後重新繪製新視圖，但是它如何知道您翻譯過的新視圖是什麼樣的？ – Andrew89898

關於滾動背景，看看這個tutorial，它會給你一個想法如何使用滾動。您可以根據需要隨意修改此選項，例如，當玩家向上推動背景時，無論玩家移動什麼都會向上移動。

對於縮放，我相信你正在尋找縮放命令。

var canvas = document.querySelector('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'blue'; 
ctx.fillRect(0, 0, 100, 100); 
ctx.scale(x,y);

通過這樣做，您可以直接縮放圖像而不是畫布。代碼片段將按x縮放圖像的寬度和高度。給這個post一看。

var w = value; 
var h = value; 
var x = scale; 
ctx.drawImage(img, 0, 0, w/x, h/x);

有比例上的一些東西，一看here，旋轉和其他的東西，你可能會發現做一個遊戲是有用的。

來源

2015-07-21 15:30:31 Grinch91

嗨，這些資源是偉大的，但你能給我另一個使用scale（）命令的例子嗎？我似乎無法讓它起作用，我認爲這與重新繪製有關。 – Andrew89898

看看這個教程[鏈接]（http://www.tutorialspoint.com/html5/canvas_scaling.htm），看看這個[編輯]（http://www.w3schools.com/tags/tryit .asp？filename = tryhtml5_canvas_scale）在這裏你可以直接嘗試它自己 – Grinch91

HTML5 Canvas縮放/縮放更大2D世界的視圖框？

回答

相關問題