Динамически изменить размер окна холста с помощью javascript/jquery?

Как изменить размер холста с помощью javascript/jquery?

Изменение размера с помощью функции css и ее применение к элементу canvas просто растягивает содержимое, как если бы вы растягивали изображение.

Как я буду делать это без растяжки?

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

3 ответа

Создайте функцию, которая выполняет рисунок, а затем повторно рисует каждый раз, когда требуется что-то изменившееся (например, изменение размера страницы и т.д.). Попробуйте

Убедитесь, что вы установили 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)
 });
})();


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


При изменении размера браузера следующее решение изменяет размеры холста на основе размеров окна, создавая исходное соотношение.

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

Примечание. Чтобы изменить размер холста, его нужно перерисовать.

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

licensed under cc by-sa 3.0 with attribution.