使用HTML5 Canvas ...如何保持比例？

Question

// set canvas to fullscreen
$("canvas").attr('height',$(document).height());
$("canvas").attr('width', $(document).width());

//load bkgd img to canvas
function dwg(){
    $("canvas").drawImage({
            source: "img/bkgd.jpg",
            x: 0, 
            y: 0, 
            height : $(document).height(),
            width : $(document).width(),
            fromCenter: false
        });
    }
dwg();
// resize window event
$(window).resize(function(){
        //console.log($(window).height()+', '+$(window).width());
        $("canvas").attr('height',$(document).height());
        $("canvas").attr('width', $(document).width());
        dwg();
    });

// Stop distort w/ jcanvas
$("canvas").scaleCanvas({
         x: 100, y: 100,
         width: 1, height: 1
})

即使背景调整大小，此图像也应保持完整的背景（一些裁剪即可）。

这是使用jcanvas库http://calebevans.me/projects/jcanvas/

建议请？

还有一个绘图功能，为简洁起见，我省略了它。

Answer 1

这个小提琴显示了你想做的事所需的代码：

http://jsfiddle.net/ctrlfrk/ZGnbb/

这只是比率的一些数学。