使用 javascript/jquery 动态调整画布窗口的大小？

Posted 2023-03-05

【中文标题】使用 javascript/jquery 动态调整画布窗口的大小？

【英文标题】：Dynamically resize canvas window with javascript/jquery?

【发布时间】：2012-07-07 06:47:21

【问题描述】：

如何使用 javascript/jquery 调整画布的大小？

使用 css 函数调整大小并将其应用于画布元素只会拉伸内容，就像拉伸图像一样。

如果没有拉伸，我该怎么做呢？

http://jsfiddle.net/re8KU/4/

【问题讨论】：

发布您想要调整大小的 html 内容。

无代码无能为力...你可以试试$("canvas").width(number).height(number)

好的，你试过观看这个演示吗：jqueryui.com/demos/resizable

@ZeeTee 这不是一个正常的 DOM 元素大小调整问题！！！看看jsfiddle。

【参考方案1】：

每当调整浏览器的大小时，以下解决方案都会根据窗口的尺寸通过创建初始比例来调整画布的尺寸。

Jsfiddle：http://jsfiddle.net/h6c3rxxf/9/

注意：画布在调整大小时需要重新绘制。

HTML：

<canvas id="myCanvas"   >

CSS：

canvas 
    border: 1px dotted black;
    background: blue;

JavaScript：

(function() 
    // get the precentage of height and width  of the cavas based on the height and width of the window
    getPercentageOfWindow = function() 
        var viewportSize = getViewportSize();
        var canvasSize = getCanvastSize();
        return 
            x: canvasSize.width / (viewportSize.width - 10),
            y: canvasSize.height / (viewportSize.height - 10)
        ;
    ;
    //get the context of the canvas 
    getCanvasContext = function() 
        return $("#myCanvas")[0].getContext('2d');
    ;
    // get viewport size
    getViewportSize = function() 
        return 
            height: window.innerHeight,
            width: window.innerWidth
        ;
    ;
    // get canvas size
    getCanvastSize = function() 
        var ctx = getCanvasContext();
        return 
            height: ctx.canvas.height,
            width: ctx.canvas.width
        ;
    ;
    // update canvas size
    updateSizes = function() 
        var viewportSize = getViewportSize();
        var ctx = getCanvasContext();
        ctx.canvas.height = viewportSize.height * percentage.y;
        ctx.canvas.width = viewportSize.width * percentage.x;
    ;
    var percentage = getPercentageOfWindow();
    $(window).on('resize', function() 
        updateSizes();
    );
());

【参考方案2】：

 (function($)   
        $.fn.extend(  
            //Let the user resize the canvas to the size he/she wants  
            resizeCanvas:  function(w, h)   
                var c = $(this)[0]  
                c.width = w;  
                c.height = h  
              
        )  
    )(jQuery)

使用我创建的这个小功能来随时调整大小。这样使用——

$("the canvas element id/class").resizeCanvas(desired width, desired height)

【讨论】：

我把这两个答案结合起来做了一个很棒的功能！谢谢你们。

【参考方案3】：

创建一个绘制函数，然后在需要它的更改时重新绘制（例如页面大小调整等）。 Try it out

Make sure you set the context.canvas.width/height，不是 CSS 宽度/高度。另请注意，设置大小会清除画布。

我会怎么写：

(function()
    var c = $("#canvas"), 
        ctx = c[0].getContext('2d');

    var draw = function()
        ctx.fillStyle = "#000";
        ctx.fillRect(10,10,50,50);   
    ;

    $(function()
        // set width and height
         ctx.canvas.height = 600;
         ctx.canvas.width = 600;
        // draw
        draw();

        // wait 2 seconds, repeate same process
        setTimeout(function()
            ctx.canvas.height = 400;
            ctx.canvas.width = 400;
            draw();
        , 2000)
    );
)();

​