用 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/

这只是一些关于比率的数学运算。