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

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

使用css函数resize并将其应用于canvas元素只会拉伸内容，就像拉伸图像一样。

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

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

Answer 1

创建一个执行绘图的函数，然后在需要它的更改时重新绘制（如页面resize等）。 试试看

确保设置context.canvas.width / height ，而不是CSS宽度/高度。 另请注意，设置大小会清除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) }); })(); 

Answer 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) 

使用我创建的这个小function来处理随时随地resize。 用这种方式 –

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

Answer 3

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

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

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

HTML：

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