Как создать круг в HTML с помощью javascript. Это можно сделать с помощью Javascript или нет? Я сделал создание прямоугольников и квадратов, но не знаю, как выполнить круг.
Как создать круг с помощью javascript
Ответ 1
Вам нужно использовать следующее: -
Поместите код в свой тег заголовка.
<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>
Вы можете проверить документацию для этого здесь
Ответ 2
Вот простой способ сделать круг для современных браузеров:
<div style='border: 3px solid red; border-radius: 50px; width: 100px; height: 100px;'>
</div>
Демо.
edit — Он работает лучше с помощью "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>
Ответ 3
Используя холст HTML5 и 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
Ответ 4
Вы можете использовать некоторую библиотеку javascript для того же самого. Например, это третья сторона js-библиотеки, которая может служить вашей цели