如何使圆的半径在画布元素中响应？答案

【问题标题】：how do make the radius of the circle responsive in canvas element?如何使圆的半径在画布元素中响应？
【发布时间】：2014-12-23 04:08:24
【问题描述】：

我有一个画布元素，我在其中画了一个圆圈。如何赋予画布元素响应能力？

如果浏览器的宽度改变了我需要改变半径，如果浏览器的高度改变了我需要改变半径。

为此，我需要如何计算变化率？

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

【问题讨论】：

签出此答案stackoverflow.com/questions/1821702/… 这是关于图像映射的，但您可以根据需要和画布元素重写它
这个问题可以通过添加一个 jsfiddle 来改善，该 jsfiddle 展示了您如何设置画布和页面上的响应能力。 jsfiddle.net

标签： javascript html canvas

【解决方案1】：

您似乎让画布根据其 div 容器调整大小。这会带来一个问题。

如果您使用不同的宽度和高度百分比来调整画布的 CSS 大小，那么画布内容将会扭曲——它会拉伸。

为避免变形，您必须按比例调整画布宽度和高度（以相同的百分比）。按比例调整大小的画布不一定会像以前那样填充新的 div 大小。

另一种选择：

调整画布元素本身的大小并使用缩放转换来重绘您的内容

这样您就无需重新计算圆的半径或位置。您可以使用与最初用于绘制圆的完全相同的绘图命令。画布的内置缩放将为您完成所有重新计算！

获取画布和 div 容器的引用并保存原始 div 大小

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

var originalWidth=divcontainer.width;
var originalHeight=divcontainer.height;

将画布元素调整为新的 div 大小。

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;

使用上下文缩放自动调整画布大小。任何重绘的内容都将使用相同的原始绘图命令自动缩放。

// 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);

【讨论】：

最后一部分 context.scale(-scaleFactor); 让我感到不安，但其他一切都很好，即使没有那条线。

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

尝试像这样使用：

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

【讨论】：