javascript - 在圆上画点

Question

我创建了一个圈子:

<div class='ring'></div>

.ring {
    border-radius: 50%;
    border: 2px solid;
  }

我需要在圆弧上画点(如A点)和圆内点(如B点)，我该如何巧妙地画点？这意味着我可以选择在圆圈上的任何地方理解和添加点。

Answer 1

使用 CSS 无法做到这一点。最简单的方法是使用 HTML5 Canvas。 Here is an example使用我创建的一些函数:

HTML

<canvas id="myCanvas" width="300" height="300">Your browser does not support the HTML5 canvas tag.</canvas>

JS

//Define Variables
var radius = 80;
var point_size = 4;
var center_x = 150;
var center_y = 150;
var font_size = "20px";

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function drawCircle(){
    ctx.beginPath();
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI);
    ctx.stroke();
}

function drawPoint(angle,distance,label){
    var x = center_x + radius * Math.cos(-angle*Math.PI/180) * distance;
    var y = center_y + radius * Math.sin(-angle*Math.PI/180) * distance;

    ctx.beginPath();
    ctx.arc(x, y, point_size, 0, 2 * Math.PI);
    ctx.fill();

    ctx.font = font_size;
    ctx.fillText(label,x + 10,y);
}

//Execution
drawCircle();
drawPoint(0,1,"A");
drawPoint(90,1.5,"B");
drawPoint(180,1,"C");
drawPoint(45,0.5,"D");

这将生成以下输出:

看看 drawPoint 函数的 angle 和 distance 变量如何控制点的位置。