使用html5画布在一个圆圈中以不同角度显示不同的值

Posted

技术标签:

【中文标题】使用html5画布在一个圆圈中以不同角度显示不同的值【英文标题】:Display different values at different angles in a circle using html5 canvas 【发布时间】:2012-09-12 19:06:41 【问题描述】:

使用 html5 Canvas 和 javascript,我需要在一个圆圈内以不同的角度显示不同的值(可能用点表示)。

示例数据: val 34% @ 0°, 54% @ 12°, val 23% @ 70°, 等等……

如果我有一个 300 x 300 像素的画布,圆的中心位于 x: 150 像素和 y: 150 像素,半径为 150 像素,我将如何计算将值设置为 12 度 54% 的点的位置?

我的数学有点糟糕xD

感谢任何形式的帮助,如果我说得不够清楚,请提出问题。

感谢您的聆听,并提前感谢您的深刻见解:D

编辑(更详细地解释):

这是一张图片来说明我想要完成的事情:

我希望这能让我的问题更容易理解。 (可以看到,和上面的值不一样)

请耐心等待!

【问题讨论】:

【参考方案1】:

您可以使用它来将极坐标(半径、角度)坐标转换为笛卡尔坐标:

// θ : angle in [0, 2π[
function polarToCartesian(r, θ) 
    return x: r*Math.cos(θ), y: r*Math.sin(θ);

例如,如果你想在 12° 处绘制,你可以这样计算点:

var p = polarToCartesian(150, 12*2*Math.PI/360);
p.x += 150; p.y += 150;

编辑:我的 polarToCartesian 函数将 radians 作为输入,与 Canvas API 中的许多函数一样。如果你更习惯学位,你可能需要这个:

 function degreesToRadians(a) 
     return Math.PI*a/180;
 

【讨论】:

这看起来不错,有没有jsfiddle演示的机会? @dystroy Ty 为您快速解答,遗憾的是它并没有完全解决我的问题。我已经更新了我的问题,以进一步解释我要完成的工作:) 请耐心等待! :D 我想我给了你需要的元素。你还有剩下的问题吗?所以不会编写你的整个软件。 +1 很棒的演示,对许多开发人员来说真的很有用! @LinusPersson 你应该可以做你需要的。 好。很高兴知道这很有用:)【参考方案2】:

给你 (demo)

var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');

var drawAngledLine = function(x, y, length, angle) 
    var radians = angle / 180 * Math.PI;
    var endX = x + length * Math.cos(radians);
    var endY = y - length * Math.sin(radians);

    ctx.beginPath();
    ctx.moveTo(x, y)
    ctx.lineTo(endX, endY);
    ctx.closePath();
    ctx.stroke();


var drawCircle = function(x, y, r) 
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();


var drawDot = function(x, y, length, angle, value) 
    var radians = angle / 180 * Math.PI;
    var endX = x + length*value/100 * Math.cos(radians);
    var endY = y - length*value/100 * Math.sin(radians);
    drawCircle(endX, endY, 2);


var drawText = function(x, y, length, angle, value) 
    var radians = angle / 180 * Math.PI;
    var endX = x + length*value/100 * Math.cos(radians);
    var endY = y - length*value/100 * Math.sin(radians);
    console.debug(endX+","+endY);
    ctx.fillText(value+"%", endX+15, endY+5);
    ctx.stroke();


var visualizeData = function(x, y, length, angle, value) 

    ctx.strokeStyle = "#999";
    ctx.lineWidth = "1";
    drawAngledLine(x, y, length, angle);

    ctx.fillStyle = "#0a0";
    drawDot(x, y, length, angle, value);

    ctx.fillStyle = "#666";
    ctx.font = "bold 10px Arial";
    ctx.textAlign = "center";
    drawText(x, y, length, angle, value);


ctx.fillStyle = "#FFF0B3";
drawCircle(150, 150, 150);

visualizeData(150, 150, 150, 0, 34);
visualizeData(150, 150, 150, 12, 54);
visualizeData(150, 150, 150, 70, 23)

visualizeData(150, 150, 150, 120, 50);
visualizeData(150, 150, 150, -120, 80);
visualizeData(150, 150, 150, -45, 60);

【讨论】:

谢谢!问题已经解决了:D 再次感谢您的宝贵时间!

以上是关于使用html5画布在一个圆圈中以不同角度显示不同的值的主要内容,如果未能解决你的问题,请参考以下文章

如何用 HTML5 画布将一个圆圈分成三个相等的部分?

html5画布精灵表随机行/列

两个圆圈的动画方法是啥?

无法在画布中设置背景图像

Html5中的一个光滑圆圈

HTML5 画布大小和分辨率