棘手的屏幕尺寸和缩放比例（使用Javascript）

我有一个棘手的问题，可能只是一个简单的解决方案，虽然我现在真的没有看到它。棘手的屏幕尺寸和缩放比例（使用Javascript）

所以，我一直在围绕着HTML5元素，显然是在JavaScript中进行交互方法。

这项工作的目标之一是能够使用移动设备[MD]（iOS或Android，手机或平板电脑）作为将由另一台机器提供服务的应用程序（例如a笔记本电脑或外接显示器），两者将在不同尺度的每个屏幕上显示相同的内容。因此，当画布填满80％（或者在这种情况下，“擦除”（我已经通过计算[初始]像素的总数）并且每个设备具有不同的颜色时，我想要发生事件算上因为屏幕尺寸/分辨率不同

这是棘手的部分。我将如何能够“规模”的MD像素数和镜像该到更大的屏幕

采取具体措施，怎么样？我将能够实现以下示例：

我在MD上画了一条线，宽度为300px，为了简单起见，假设这代表MD画布的10％（两个屏幕都是全屏显示）。我希望外部显示器（具有更高分辨率）能够反映此事件，但尺寸适当，以便MD上的这些10％代表“缩放比例”的10％“画布不动产”

Just in案文是太混乱了，我会留下波纹管代码：

function totalPix(x, y) { 
    var total = x * y; 
    var objective = (total * 80)/100; 
} 

function canvasApp() { 

//prevent from scrolling (no bouncing) 
document.body.addEventListener('touchmove', function(event){ 
    event.preventDefault(); 
}, false); 

if(!canvasSupport()) { 
    alert("No canvas support on this device!"); 
    return; 
} else if(!socketSupport) { 
      alert("No websocket support on this device!"); 
     } else { 

    //create canvas on every load (//TODO) 
    var elemDiv = document.getElementById("content"); 
    var newElem = document.createElement("canvas"); 
    newElem.setAttribute("id", "frontscreen"); 
    elemDiv.appendChild(newElem); 

    drawScreen(); 

    function drawScreen() { 

     //Setup canvas 
     var canvas = document.getElementById("frontscreen"); 
     canvas.width = window.innerWidth; 
     canvas.height = window.innerHeight; 

     totalPix(canvas.width, canvas.height); 

     ctx = canvas.getContext("2d"); 

     ctx.fillStyle = "black"; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 
     ctx.beginPath(); 

     //Foreach touchmove event, send position to server 
     canvas.addEventListener('touchmove', function(event) { 
      for (var i = 0; i<event.touches.length; i++) { 
       var touch = event.touches[i]; 
       ctx.globalCompositeOperation = "destination-out"; 
       ctx.fillStyle = "white"; 
       ctx.beginPath(); 
       ctx.arc(touch.pageX, touch.pageY, 30, 0, 2*Math.PI, false); 
       ctx.fill(); 
       ctx.stroke(); 
      } 
     }, false); 
    window.onresize = function resizeCanvas() {drawScreen();}; 
    } 
} 
}

来源

2012-09-05 Zed_Blade

如果我理解正确的话，这是因为改变你的<canvas>元素的HTML样式属性的大小属性一样简单。例如，假设您填写300 x 300像素。显示器A占据屏幕房地产的10％（我知道，大屏幕）。然后你在显示器B上加载相同的页面，这是显示器A的两倍大小。（真的是真的很大的显示器，只是在这里忍着，这是一个例子）。当然，它只占据屏幕房地产的5％。

如果你想要的是300到始终占据所有屏幕尺寸相同的百分比（但仍是在画布上300像素），你可以做这样的事情：

var canvas = document.getElementById("mycanvas"); 
var heightAsPercent = 10; 
var widthAsPercent = 10; 
canvas.style.height = (heightAsPercent/100) * screen.height; 
canvas.style.width = (widthAsPercent/100) * screen.width;

通过这种方式，将Canvas 总是占据屏幕的10％，无论显示器宽度是3000px还是6000px。我明显选择了非常详细的变量名称，因此可以根据需要随意修改它们。

其原因是您只修改画布的CSS属性，它只影响它的呈现方式，而不是实际的<canvas>数据。我偶然发现了这个小窍门，它让我疯狂，直到我明白为什么它这样做。现在它实际上派上用场了。 :)

来源

2012-09-05 02:48:09

我不需要画布来缩放，因为它已经做了任何屏幕尺寸。我想要的是在screenA上绘制的每个“对象”都被缩放并转换为screenB。请参阅[链接]上的示例（https://dl.dropbox.com/u/3543277/raspadinha/index.html），并将其用于移动设备和PC浏览器，以查看是否有帮助:) –

棘手的屏幕尺寸和缩放比例（使用Javascript）

回答

相关问题