首页 文章

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

提问于
浏览
5

使用HTML5 Canvas和Javascript我需要在圆圈内的不同角度显示不同的值(可能用点表示) .

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

如果我有300 x 300px的画布并且圆的中心位于x:150px且y:150px,半径为150px,我将如何计算在12度时将点设置为54%的位置?

我的数学有点可怕xD

我会感激任何帮助,如果我不够清楚,请提出问题 .

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

编辑(更详细解释):

这是一张图片来说明我想要完成的任务:
Illustration: values at different angles/degrees

我希望这使我的问题更容易理解 .
(如您所见,与上述值不同)

Ty耐心等待!

2 回答

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

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

    function degreesToRadians(a) {
         return Math.PI*a/180;
     }
    
  • 6

    你走了(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);
    

相关问题