JavaScriptで円を描きたい

JavaScriptで円を描きたいのですがどこから始めていいのかわかりません。
教えていただけると幸いです。

行動規範の内容に同意します

回答5件

円といっても色々あるかと思いますが、canvas で描いてみてはどうでしょうか？
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

投稿2019/12/04 09:19

編集2019/12/04 09:26

x_x

総合スコア13749

x_x

2019/12/04 09:25

なんかリンク先が 404 だったりしますが英語版にしてみればありますので

行動規範の内容に同意します

ベストアンサー

HTML
1<div id="circle"></div>
2<script>
3  circle.innerText = '○';
4  circle.style.fontSize = '100vw';
5  circle.style.lineHeight = '100%';
6</script>

投稿2019/12/04 12:22

shinji709

総合スコア805

Canvas, SVG の他には、CSS を使う方法もあります。
「css 円」などで検索するといくらでも出てくるので、具体的なやり方についてはご自身で検索してください。

投稿2019/12/04 10:52

2KOH

総合スコア999

svgの例

<script>
window.addEventListener('DOMContentLoaded',()=>{
  document.querySelector('#btn').addEventListener('click',()=>{
    const c=document.createElementNS('http://www.w3.org/2000/svg', "circle");
    c.setAttributeNS(null,"cx","50");
    c.setAttributeNS(null,"cy","50");
    c.setAttributeNS(null,"r","30");
    c.setAttributeNS(null,"stroke","black");
    c.setAttributeNS(null,"fill","orange");
    document.querySelector('svg').appendChild(c);
  });
});
</script>
<svg width=100 height=100></svg>
<input type="button" value="circle" id="btn">

投稿2019/12/04 09:38

yambejp

総合スコア114843

HTML
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>円で円を描く</title>
4
5<style>
6#HOGE { position: absolute; top: 300px; left: 250px;}
7#HOGE > span { position: absolute;}
8#HOGE > span:before { content: '円';}
9</style>
10
11<body>
12  <h1>円で円を描いてみる</h1>
13<div id="HOGE"></div>
14
15<script>
16const
17  num = 60, //点の数
18  radius = 200, //半径
19  sin = a => Math.sin (a * Math.PI / num * 2),//SIN関数
20  cos = a => Math.cos (a * Math.PI / num * 2),//COS関数
21  locate = (e, x, y) => e.style.cssText = `left:${x|0}px; top:${y|0}px`,//位置指定関数 
22  points = [...Array (num).keys ()].map (n => ({x: cos (n) * radius, y: sin (n) * radius})),//点を計算して配列にする
23  span = document.createElement ('span');//コピー元
24  
25points.forEach (({x, y}) => {
26  let e = span.cloneNode (true);//クローンを作って
27  locate (e, x, y);//位置決めして
28  HOGE.appendChild (e);//ノードを追加する
29});
30</script>
31