使用javascript / jquery动态调整画布窗口大小？ [英] Dynamically resize canvas window with javascript/jquery?

问题描述

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

How can I resize a canvas with javascript/jquery?

使用css函数调整大小并将其应用到canvas元素只是拉伸内容，就像伸展一个图像。

Resizing using the css function and applying it to the canvas element just stretches the content as if you were stretching an image.

我如何在没有伸展的情况下这样做？

How would I go about doing this without the stretching?

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

推荐答案

创建一个执行绘图的函数，然后在需要更改的时候重新绘制（如调整页面大小等）。 试用

Make a function that does the drawing, then re-draw whenever something changes that requires it (like a page resize, etc). Try it out

请确保您设置了context.canvas.width / height ，而不是CSS宽度/高度。另请注意，设置大小会清除画布。

Make sure you set the context.canvas.width/height, not CSS width/height. Also note that setting the size clears the canvas.

我会如何编写：

(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)
    });
})();

这篇关于使用javascript / jquery动态调整画布窗口大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！