読者です 読者をやめる 読者になる 読者になる

落書きノート

ふと自分が気になった事を書いてます

HTML CSS JavaScriptでCG作成

前回の続きです。

<html>

<head>
  <title>canvas tutorial</title>
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById('tutorial');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.fillRect(50,50,300,200);
        ctx.clearRect(120,80,200,140);
        ctx.strokeRect(200,20,180,260);
      }
    }
  </script>
  <style type="text/css">
    canvas {
      border: 1px solid #999;
    }
  </style>
</head>

<body onload="draw();">
  <canvas id="tutorial" width="400" height="300"></canvas>
</body>

</html>

f:id:kh2n:20170515095105p:plain

<html>

<head>
  <title>canvas tutorial</title>
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById('tutorial');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.lineTo(360,200);
        ctx.lineTo(140,250);
        ctx.closePath();
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(50,250);
        ctx.lineTo(160,20);
        ctx.lineTo(340,50);
        ctx.closePath();
        ctx.fill();
      }
    }
  </script>
  <style type="text/css">
    canvas {
      border: 1px solid #999;
    }
  </style>
</head>

<body onload="draw();">
  <canvas id="tutorial" width="400" height="300"></canvas>
</body>

</html>

f:id:kh2n:20170515095142p:plain

<html>

<head>
  <title>canvas tutorial</title>
  <script type="text/javascript">
    function draw() {
      var canvas = document.getElementById('tutorial');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(200,150,100,0,Math.PI*2,false);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(200,150,80,0,Math.PI*1.5,false);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(200,150,60,Math.PI*0.25,Math.PI*1.0,true);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(200,150,20,0,Math.PI*2.0,true);
        ctx.fill();
      }
    }
  </script>
  <style type="text/css">
    canvas {
      border: 1px solid #999;
    }
  </style>
</head>

<body onload="draw();">
  <canvas id="tutorial" width="400" height="300"></canvas>
</body>

</html>

f:id:kh2n:20170515095233p:plain