Wie einen ansprechenden Charakter mit HTML5 Canvas und JS machen

Question

ich einen Charakter mit HTML5 Canvas und Javascript, dieses Tutorial folgenden erstellt habe: http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/

Obwohl ich jetzt kämpfe die Zeichen, die auf zu machen, ich habe schon versucht, diese :

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); 
    }); 
}); 

dies scheint aber nur das Bild zu schneiden, anstatt sie zu Ändern der Größe. Hier

ist eine Demo: https://jsfiddle.net/cjdygegh/

Answer 1

Dies liegt daran, Sie sind nur die Leinwand Ändern der Größe, die Bilder in der gleichen Größe bleiben und daher außerhalb der Grenzen der Leinwand gehen. Sie müssen die Skalierungsfunktion verwenden, um die Szene auf der Leinwand durch die aktuelle Breite und Höhe durch die gewünschte Breite und Höhe geteilt maßstab:

1. Wenn Sie den Aspekt wollen:

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

   Dinge zu berücksichtigen, Verhältnis gehalten werden? In diesem Fall müssen Sie das Mindestverhältnis von Breite oder Höhe verwenden.

2. Wenn Sie größer als 100% skalieren möchten.