Webページに丸を描く5つの方法

ひまなのでWebで丸を描く方法についていろいろ考えてみました。TMTOWTDI。

▪文字

<div id="mychar">●</div>

#mychar {
  color: #00f;
  font-size: 120px;
}

▪CSS

    <div id="mydiv"></div>

#mydiv {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-color: #00f;
}

▪Canvas

    <canvas id="mycanvas" width="110" height="110"></canvas>

      var canvas = document.querySelector('#mycanvas');
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#00f';
      ctx.beginPath();
      ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
      ctx.fill();

▪SVG

    <svg width="110" height="110"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
      <circle cx="50" cy="60" r="50" fill="blue" />
    </svg>

▪WebGL(Three.js)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
    <div id="mywebgl"></div>

      // シーンを作成
      var scene = new THREE.Scene();
      // サークルオブジェクトを作成
      var material =  new THREE.MeshBasicMaterial({color:"#0000FF"});
      var geometry = new THREE.CircleGeometry(0.5, 32);
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
      //カメラを作成
      var camera = new THREE.PerspectiveCamera(45, 1, 1, 100);
      camera.position.set(0, 0.05, 1.4);
      var renderer = new THREE.WebGLRenderer();
      // レンダラを作成
      renderer.setSize(110, 110);
      renderer.setClearColor("#fff", 1);
      document.querySelector('#mywebgl').appendChild(renderer.domElement);
      renderer.render(scene, camera);