5

HTML5 Canvas と Javascript を使用して、円の内側にさまざまな角度でさまざまな値 (おそらくドットで表される) を表示する必要があります。

データ例:
val 34% @ 0°、
val 54% @ 12°、
val 23% @ 70°など
...

キャンバスが 300 x 300px で、円の中心が x: 150px と y: 150px にあり、半径が 150px の場合、値 54% のドットを 12 度で設定する場所をどのように計算しますか?

私の数学はちょっとひどい xD

助けていただければ幸いです。説明が不十分な場合は、質問してください。

聞いてくれてありがとう、そして深い洞察を前もってありがとう:D

編集（より詳細に説明するため）：

これは、私が達成しようとしていることを説明するための画像です。 図: さまざまな角度/度での値

これにより、私の質問がもう少し理解しやすくなることを願っています。
(ご覧のとおり、上記と同じ値ではありません)

あなたの忍耐のためにタイ！

4

2 に答える 2

6

これを使用して、極 (半径、角度) 座標からデカルト座標に変換できます。

// θ : 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;
 }
于 2012-09-20T12:09:14.007 に答える
1

どうぞ (デモ)

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);
于 2012-09-27T04:24:51.360 に答える