使用 javascript/jquery 动态调整画布窗口大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11368477/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically resize canvas window with javascript/jquery?
提问by maxhud
How can I resize a canvas with javascript/jquery?
如何使用 javascript/jquery 调整画布大小？
Resizing using the css function and applying it to the canvas element just stretches the content as if you were stretching an image.
使用 css 函数调整大小并将其应用于画布元素只会像拉伸图像一样拉伸内容。
How would I go about doing this without the stretching?
如果没有拉伸，我将如何做到这一点？
回答by Josiah Ruddell
Make a function that does the drawing, then re-draw whenever something changes that requires it (like a page resize, etc). Try it out
创建一个进行绘图的函数，然后在需要它的更改（例如页面大小调整等）时重新绘制。试试看
Make sure you set the context.canvas.width/height, not CSS width/height. Also note that setting the size clears the canvas.
确保你设置的是 context.canvas.width/height，而不是 CSS 的宽度/高度。另请注意，设置大小会清除画布。
How I would write it:
我会怎么写：
(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)
});
})();
?
?
回答by Knights
(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)
Use this little function I created to take care of resizing on the go. Use it this way --
使用我创建的这个小函数可以随时随地调整大小。用这种方式——
$("the canvas element id/class").resizeCanvas(desired width, desired height)
回答by Razan Paul
Whenever the browser is resized, the following solution resizes the dimensions of the canvas based on the dimensions of the window by creating an initial ratio.
每当调整浏览器大小时，以下解决方案都会根据窗口的尺寸通过创建初始比率来调整画布的尺寸。
Jsfiddle: http://jsfiddle.net/h6c3rxxf/9/
jsfiddle：http: //jsfiddle.net/h6c3rxxf/9/
Note: The canvas needs to be re-drawn, when it is resized.
注意：当调整大小时，画布需要重新绘制。
HTML:
HTML：
<canvas id="myCanvas" width="300" height="300" >
CSS:
CSS：
canvas {
border: 1px dotted black;
background: blue;
}
JavaScript:
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();
});
}());
