Question

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

Answer 1

这是为现代浏览器制作圈子的简单方法：

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

Demo

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

<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 Tutorials

Answer 3

您需要使用以下liabrary： -

将代码放在头标记中。

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

可从here

下载

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

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

您可以从here

查看相关文档

Answer 4

你可以使用一些javascript库。像这里是第三方js库，可以满足你的目的

http://processingjs.org/

如何使用javascript生成圆圈

4 个答案: