Как создать круг с помощью JavaScript - PullRequest
Новая
       76

Как создать круг с помощью JavaScript

10 голосов
/ 09 февраля 2012

Как я могу создать круг в HTML, используя JavaScript. Это можно сделать с помощью Javascript или нет? Я закончил создавать прямоугольники и квадраты, но не знаю, как создать круг.

Ответы [ 4 ]

25 голосов
/ 09 февраля 2012

Вот простой способ сделать круг для современных браузеров: 

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

Демо .

edit & mdash; Это лучше работает с параметром "box-sizing" ("-moz-box-sizing" для Firefox), установленным в "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>
11 голосов
/ 09 февраля 2012

Используя 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

6 голосов
/ 09 февраля 2012

Вам необходимо использовать следующую библиотеку: -

Поместите код в тег головы. 

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

Вы можете ознакомиться с документацией по этому вопросу здесь

1 голос
/ 09 февраля 2012

Вы можете использовать некоторые библиотеки JavaScript для того же.Например, здесь есть сторонняя библиотека js, которая может служить вашим целям

http://processingjs.org/

...