html5中画布中的角度,使用HTML5画布显示了一圈以不同的角度不同的值(Display different values...

使用HTML5画布和Javascript我需要显示不同的值在一个圆内不同的角度(由也许点表示)。

实施例的数据：

VAL 34％@ 0°，

VAL 54％@ 12°，

VAL 23％@ 70℃，

等等...

如果我有一个画布300 x 300像素，圆圈位于X的中心：150像素和Y：150像素与150像素半径，我将如何计算，其中以12度设置我的价值54％的网点？

我的数学是有点可怕的xD

我会很感激任何形式的帮助，请提问，如果我不都说明白了。

感谢您的收听，并预先感谢您对您的深刻见解：d

编辑(以更详细地解释)：

这里说明一下，我试图完成的图像：

我希望这是我的问题多一点理解。

(正如你所看到的，而不是与上述相同的值)

泰您的耐心！

Answer 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函数采用弧度作为输入，作为画布API在许多功能。 如果你更习惯于度，可能需要这样的：

function degreesToRadians(a) {

return Math.PI*a/180;

}

Answer 2:

在这里你去( 演示 )

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

文章来源: Display different values at different angles in a circle using html5 canvas