如何使用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

回答

相关问题