如何使用javascript生成圆

Question

我如何使用 javascript 在 Html 中创建一个圆圈。是否可以使用 Javascript 来完成？我已经创建了矩形和正方形，但不知道如何完成圆形。

Answer 1

以下是针对现代浏览器进行循环的简单方法：

<div style='border: 3px solid red; border-radius: 50px; width: 100px; height: 100px;'>
</div>

演示。

编辑 - 将“box-sizing”（对于 Firefox 为“-moz-box-sizing”）设置为“border-box”效果更好。

<style>
  div.circle {
    border: 3px solid red;
    border-radius: 50%;
    width: 100px; height: 100px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>

<div class=circle>
</div>

Answer 2

使用 HTML5 Canvas 和 AJAX，您可以执行以下操作

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 10;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = "black";
    context.fill();
    context.lineWidth = 1;
    context.strokeStyle = "black";
    context.stroke();

：

主要内容是：

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

有关更多信息，请参阅：HTML5 Canvas 教程

Answer 3

您需要使用以下库：-

将代码放入您的 head 标签中。

<script type="text/JavaScript" src="jsDraw2D.js"></script>

可以从此处下载

，将以下代码复制并粘贴到您希望圈子出现的位置...

<script type="text/JavaScript">

//Create jsGraphics object
var gr = new jsGraphics(document.getElementById("canvas"));

//Create jsColor object
var col = new jsColor("red");

//Create jsPen object
var pen = new jsPen(col,1);

//Draw a Line between 2 points
var pt1 = new jsPoint(20,30);
var pt2 = new jsPoint(120,230);
gr.drawLine(pen,pt1,pt2);

//Draw filled circle with pt1 as center point and radius 30. 
gr.fillCircle(col,pt1,30);

//You can also code with inline object instantiation like below
gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150)); 

</script>

您可以检查此处的文档

Answer 4

您可以使用一些 javascript 库来实现同样的目的。就像这里是一个第三方 js 库，它可以满足您的目的

http://processingjs.org/