JavaScriptを使用してHTMLでサークルを作成するにはどうすればよいですか? JavaScriptを使用して実行できますか?長方形と正方形を作成しましたが、円を作成する方法がわかりません。
次のライブラリを使用する必要があります:-
コードをヘッドタグに挿入します。
<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>
これについてのドキュメントは here から確認できます
最近のブラウザで円を描く簡単な方法を次に示します。
<div style='border: 3px solid red; border-radius: 50px; width: 100px; height: 100px;'>
</div>
デモ 。
edit— "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>
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
あなたは同じためにいくつかのJavaScriptライブラリを使用することができます。ここのようにあなたの目的に役立つかもしれないサードパーティのjsライブラリです