如何使用HTML5 Canvas和JS

我創建了使用HTML5 Canvas和JavaScript中的角色作出一個負責任的角色，下面這個教程：http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/如何使用HTML5 Canvas和JS

雖然，我現在正在努力使字符響應，我已經試過這：

function resize(){  
    $("#canvasDiv").outerHeight($(window).height()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerHeight(true) - $("#canvasDiv").outerHeight())); 
} 

$(document).ready(function(){ 
    var myWidth = $(window).width()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerWidth(true) - $("#canvasDiv").outerWidth()); 
    var myHeight = $(window).height()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerHeight(true) - $("#canvasDiv").outerHeight()); 
    prepareCanvas(document.getElementById("canvasDiv"), myWidth, myHeight); 
    $(window).on("resize", function(){  
    var newWidth = $(window).width()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerWidth(true) - $("#canvasDiv").outerWidth()); 
    var newHeight = $(window).height()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerHeight(true) - $("#canvasDiv").outerHeight()); 
    $("#canvasDiv").empty(); 
    prepareCanvas(document.getElementById("canvasDiv"), newWidth, newHeight); 
    }); 
});

但是，這似乎只是削減圖像，而不是調整大小。

這裏是一個演示：https://jsfiddle.net/cjdygegh/

來源

2017-04-20 Koala

這是因爲你只是調整畫布，圖像內停留相同的大小，因此去畫布的邊界之外。您需要通過當前的寬度和高度由所需的寬度和高度除以使用尺度函數來縮放場景在畫布上：

context.scale(x, y); // Where x and y are ratios (1 being 100%).

需要考慮的事情：

如果你想縱橫比例要保持？如果是這樣，您將需要使用寬度或高度的最小比例。
如果您想放大，超過100％。

來源

2017-04-20 16:29:42 Simon

如何使用HTML5 Canvas和JS

回答

相關問題