Question

我有一个画布元素，我画了一个圆圈。如何为canvas元素提供响应？

如果浏览器的宽度发生变化，我需要将半径改变一些，如果浏览器的高度发生变化，我需要将半径改变一些。

为此我该如何计算变化率？

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大小。

替代方案：

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

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

获取对画布的参考＆amp;您的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);

如何在canvas元素中使圆的半径响应？

3 个答案: