javascript - 圆上的画点

我有一个创建的圈子:

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

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

我需要在圆弧上绘制点(例如A点)，在圆内绘制点(例如B点)，我该如何明智地做到这一点？意味着我可以选择理解并在圆上的任何地方添加点。

最佳答案

您将无法使用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");

这将生成以下输出:



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

关于javascript - 圆上的画点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32681610/