css3的帆布比例尺故障

Question

我的代碼包含一個85％視角的div，它包含一個畫布。我目前只能通過點擊畫布進行滾動，但由於某種原因，我隨時可以調用canvas.style.transform =「scale（2,2）」;畫布保持相同的大小。任何幫助？

編輯 - 我正在通話規模的比例放大（）函數

<!--Div to view, div to zoom, div to translate --> 
 
<div id="view-translate" style="height:85vh; background-color:#f2f2f2; overflow:hidden; "> 
 
\t <canvas id="ctx" height="4000" width="4000" oncontextmenu="return false;" style="background-color:#ffffff;"></canvas> 
 
</div> 
 

 
<p id="text"></p> 
 
<button onclick="scaleUp()">yes</button> 
 

 
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> 
 

 
<script> 
 
\t //NETWORK VARIABLES 
 
\t var socket = io(); 
 
\t //GETTING HTML ITEMS BY ID 
 
\t var tran = document.getElementById("view-translate"); 
 
\t 
 
\t var canvas = document.getElementById("ctx"); 
 
\t ctx = canvas.getContext("2d"); 
 

 
\t 
 
\t //canvas.style.transform = "scale(2,2)"; 
 
\t //canvas.style.transform = "translate(0px,0px)"; \t 
 
\t 
 
\t 
 
\t var tx = 0,//release x and y 
 
\t ty = 0, 
 
\t cx = 0,//click x and y 
 
\t cy = 0, 
 
\t mx= 0,//move x and y 
 
\t my = 0, 
 
\t scale = 1, 
 
\t draggable = false; 
 
\t 
 
\t ctx.fillStyle="red"; 
 
\t ctx.fillRect(0,0,4,4); 
 
\t 
 
\t function scaleUp(){ 
 

 
\t \t 
 
\t } 
 
\t 
 
\t //GETTING THE MOUSE X AND Y 
 
\t function getMousePos(canvas, event){ 
 
\t \t var rect = canvas.getBoundingClientRect(); 
 
\t \t return { 
 
\t \t \t x:event.clientX - rect.left, 
 
\t \t \t y:event.clientY - rect.top 
 
\t \t }; 
 
\t } 
 
\t 
 
\t canvas.addEventListener('mousedown', function(event){ 
 
\t \t 
 
\t \t var pos = getMousePos(canvas, event); 
 
\t \t 
 
\t \t cx = pos.x; 
 
\t \t cy = pos.y; 
 
\t \t 
 
\t \t if(event.which === 3){ 
 
\t \t \t draggable = true; 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t if(event.which === 1){ 
 
\t \t \t alert(cx + " " + cy); 
 
\t \t } 
 
\t \t 
 
\t \t if(event.which === 2){ 
 
\t \t } 
 

 
\t }, false); 
 
\t 
 
\t tran.addEventListener('mousedown', function(event){ 
 
\t \t 
 
\t \t var pos = getMousePos(tran, event); 
 
\t \t 
 
\t \t 
 
\t \t if(event.which === 3){ 
 
\t \t } 
 
\t \t 
 
\t \t if(event.which === 1){ 
 
\t \t 
 
\t \t } 
 
\t \t 
 
\t \t if(event.which === 2){ 
 
\t \t } 
 

 
\t }, false); 
 
\t 
 
\t tran.addEventListener('mouseup', function(event){ 
 
\t \t 
 
\t \t if(event.which === 3){ 
 
\t \t \t draggable = false; 
 
\t \t } 
 
\t \t 
 
\t \t if(event.which === 1){ 
 

 
\t \t } 
 
\t \t 
 
\t \t if(event.which === 2){ 
 

 
\t \t } 
 

 

 
\t }, false); 
 
\t 
 
\t tran.addEventListener('mousemove', function(event){ 
 
\t \t 
 
\t \t var pos = getMousePos(tran, event); 
 
\t \t mx = pos.x; 
 
\t \t my = pos.y; 
 
\t \t 
 
\t \t document.getElementById("text").innerHTML = mx + ", " + my + " size:" + canvas.height + " " + canvas.width; 
 
\t \t 
 
\t \t if(draggable){ 
 
\t \t \t tx = mx - cx; 
 
\t \t \t ty = my - cy; 
 
\t \t \t 
 
\t \t \t document.getElementById("text").innerHTML = "CLICK!" + tx + ", " + ty; 
 
\t \t \t 
 
\t \t \t canvas.style.transform = "translate(" + tx + "px, " + ty + "px)"; 
 
\t \t } 
 
\t 
 
\t }, false); 
 
\t 
 
\t 
 
\t 
 
</script> 
 

 
</html>

Answer 1

對HTML5的畫布.scale方法實際上並沒有調整畫布。它所做的只是影響將來在畫布上繪製的東西。
這是一個很好的例子，它是如何工作的 https://www.w3schools.com/tags/canvas_scale.asp 正如你所看到的，原來的矩形保持相同的大小，但第二個是兩倍大。

您需要直接更改畫布的高度和寬度。這樣的事情應該這樣做 Resize HTML5 canvas to fit window