Как сделать радиус круга чувствительным в элементе холста?

Question

У меня есть элемент холста, в котором я нарисовал круг. Как я могу реагировать на элемент холста?

Если ширина браузера изменяется, мне нужно изменить радиус на некоторую величину, если высота браузера изменится, мне нужно изменить радиус на некоторую величину.

Для этого как мне нужно рассчитать коэффициент изменения?

var canvasWidthRatio = currentDivWidth/initialDivWidth; 
var canvasHeightRatio = currentHeight/initialDivHeight; 
radius = (I need something here) 

Answer 1

попробовать этот

var radius = 10; // set default radius to start with 
var radiusX = Math.min(currentDivWidth , radius); // set horizontal radius to be atleast as wide as width of div 
var radiusY = Math.min(currentDivHeight , radius); // set vertical radius to be atleast as high as height of div 

radius = Math.min(radiusX, radiusY); // now set the radius of the circle equal to the minimum of the two values so that it is a perfect circle 

context.arc(0, 0, radius, 0, 2*Math.PI, false); // use new radius to draw a brand new circle 

Answer 2

попробуйте использовать так:

radius = Math.min(radiusX, radiusY);// here radiusX and radiusY will be currentDivWidth,currentDivHeight resp. 

context.arc(0, 0, radius, 0, 2*Math.PI); 

посмотреть более подробное описание здесь: http://www.w3schools.com/tags/canvas_arc.asp

Answer 3

Вероятно вы позволяете изменение размера холста, основанный на его контейнер div. Это может ввести проблему.

Если вы измените размер CSS на холсте, используя разные проценты для ширины &, тогда содержимое холста будет искажаться - оно растянется.

Чтобы избежать искажений, вы должны изменить размер холста шириной & по высоте пропорционально (на тот же процент). Пространственно измененный холст не обязательно будет заполнять новый размер div, как и раньше.

Альтернатива:

Изменить размер самого холста элемента & использовать преобразование масштабирования перерисовывать ваше содержание

Таким образом, вам не нужно будет пересчитывать радиус или положение вашего круга. Вы можете использовать те же команды рисования, которые изначально использовались для рисования круга. Встроенное масштабирование холста сделает все пересчеты для вас!

1. Получить ссылку на ваш холст & вашей сНу контейнера и сохранить оригинальный размер Div

   var divcontainer=document.getElementById('mydiv'); 
   var canvas=document.getElementById('mycanvas'); 
   var context=canvas.getContext('2d'); 
   
   var originalWidth=divcontainer.width; 
   var originalHeight=divcontainer.height; 
   

2. Изменение размера холста элемент на новый размер Див.

   var newWidth=divcontainer.width; 
   var newHeight=divcontainer.height; 
   
   // Notes: 
   // Resizing the canvas element will clear its content 
   // This alternative allows the canvas to resize disproportionately 
   canvas.width=newWidth; 
   canvas.height=newHeight; 
   

3. Использование контекстного масштабирования для автоматического изменения размера холста. Любое перерисованное содержимое будет автоматически масштабироваться с использованием тех же оригинальных команд рисования.

   // calculate the scaling percentage necessary such that 
   // new content will fit on the canvas 
   var scaleFactor=Math.min((newWidth/originalWidth),(newHeight/originalHeight)); 
   
   // scale the canvas 
   context.scale(scaleFactor); 
   
   // now redraw all content (your circle) using their original sizes & coordinates 
   
   // unscale the canvas 
   // (scaling is cumulative, so this cleans up for the next resizing) 
   context.scale(-scaleFactor);