画布根据屏幕分辨率缩放

Question

我有一个应用程序，其中将平面图图像加载到画布上，然后调整画布的大小以正确地适合页面。此功能的一部分是获取图像的缩放比例，以便以后可以将办公桌打印到同一画布上。

在1352x768分辨率下，它可以正常工作，但是随着分辨率的增加，桌面尺寸也随之增加。

我有2个功能，负责绘制背景，然后绘制办公桌。我一直在寻找问题的原因，但不确定它在哪里。任何帮助或询问的方向都将受到欢迎。

这是我的功能：

这将绘制背景图像并获得缩放比例

/***************************************************************
function bgLoaded(bgImg, imgCanvas, callBack)

Sets image scale amounts according to width and height of 
screen, appends image and image canvas to the page
**************************************************************/
function bgLoaded(bgImg, imgCanvas, callBack) {
    var w = $(window).width(); //1024, 1392, 2560

    var cH = $(bgImg).height(); //bgImage width/height - 1500 wide
    var cW = $(bgImg).width();

    ImageScale = w / cW; //global variable for all additions and screen changes

    //background image for the floorplan
    imgCanvas.attr("width", w + "px").attr("height", cH * ImageScale + "px");

    var imgContext = imgCanvas[0].getContext('2d');
    imgContext.scale(ImageScale, ImageScale);
    imgContext.drawImage(bgImg[0], 1, 1);

    //build canvases and contexts
    $('#desk_canvas').attr("width", w + "px").attr("height", cH * ImageScale + "px");
    $('#hit_canvas').attr("width", w + "px").attr("height", cH * ImageScale + "px").hide();

    //scale canvases to fit page
    ctxD = $('#desk_canvas')[0].getContext('2d');
    ctxH = $('#hit_canvas')[0].getContext('2d');

    $(bgImg).hide();
    $('body').append(imgCanvas);
    bgImg.hide();

    if (typeof callBack == "function") {
        callBack();
    }
}
/**************************************************************
end bgLoaded()
**************************************************************/

这是为了绘制每张办公桌

/***************************************************************
function clearDesk(desk, ctx, color)

Deletes old desk data and draws new
**************************************************************/
//function clearDesk(desk, ctx, color) {
function clearDesk(desk, color) {
    if (desk == undefined) return;

    //save contexts for rotation transforms if necessary
    ctxD.save();
    ctxH.save();

    var rotate = desk.rotation == 90 || desk.rotation == 270;


    //delete existing desk
    ctxD.rotate(desk.rotation * Math.PI / 180);
    ctxD.clearRect(desk.x + desk.rLeft, desk.y + desk.rTop, desk.width, desk.height);
    ctxH.clearRect(desk.x + desk.rLeft, desk.y + desk.rTop, desk.width, desk.height);
    ctxD.rotate((desk.rotation * -1) * Math.PI / 180);

    var x = desk.x;
    var y = desk.y;
    var h = desk.height * ImageScale;
    var w = desk.width * ImageScale;

    var img = $("#desk" + desk.deskType)[0];
    img.height = h;
    img.width = w;
    var iCvs = $("<canvas width='" + img.width + "px' height='" + img.height + "px' />")[0];
    var iCtx = iCvs.getContext('2d');
    iCtx.drawImage(img, 0, 0, img.width, img.height);
    //iCtx.scale(ImageScale, ImageScale);

    ctxD.translate(x, y);
    ctxH.translate(x, y);
    //only draw the desk image
    ctxD.rotate(desk.rotation * Math.PI / 180);
    ctxD.drawImage(iCvs, 0, 0, w, h);
    ctxD.rotate((desk.rotation * -1) * Math.PI / 180);

    //position for text and coloring
    ctxD.translate(desk.rLeft * ImageScale, desk.rTop * ImageScale);
    ctxH.translate(desk.rLeft * ImageScale, desk.rTop * ImageScale);

    //Handle rotation to make sure text is upright
    if (rotate) {
        ctxD.rotate(270 * Math.PI / 180);
        ctxH.rotate(270 * Math.PI / 180);
    }

    //Draw background Color
    if (color) {
        ctxD.fillStyle = color;
        ctxD.fillRect(0, 0, w, h);
    }
    else {
        ctxD.fillStyle = "#DDDDDD";
        ctxD.fillRect(0, 0, w, h);
    }

    //draw hit box square for click detection
    var hitCOLOR = getCustomColor(desk);
    ctxH.fillStyle = hitCOLOR;
    ctxH.fillRect(0, 0, w, h);

    //Add desk number
    ctxD.font = "bold " + w / 2 + "px Calibri";
    ctxD.fillStyle = "#000";

    ctxD.textAlign = 'center';
    ctxD.textBaseline = 'middle';
    ctxD.fillText(desk.DeskID, w / 2, h * .6);
    //    ctxD.fillText(desk.rotation, w / 2, h * .6);

    //    Reset all transforms
    ctxD.restore();
    ctxH.restore();


}
/**************************************************************
end clearDesk()
**************************************************************/

再次获得帮助，以使这2个绘制功能始终适合窗口同步。

顺便说一句，办公桌和平面图的图像原本的尺寸为每英寸1像素。