by shigemk2

当面は技術的なことしか書かない

方眼紙を描画してみよう

HTML5

方眼紙っぽい感じのものを描画してみよう。

moveTo(x, y)は指定された始点へ鉛筆を移動する
lineTo(x, y)は、指定された終点まで線を描く

<canvas id=c width=500 height=375></canvas>
<script>
    var c_canvas = document.getElementById("c");
    var context = c_canvas.getContext("2d");
    for (var x = 0.5; x < 500; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x, 375);
    }
    for (var y = 0.5; y < 375; y += 10) {
      context.moveTo(0, y);
      context.lineTo(500, y);
    }
    context.strokeStyle = "#eee";
    context.stroke();

</script>

あと、こんな感じで、方眼紙の上に矢印を描画する
することもできる。

  <body>
    <canvas id=c width=500 height=375></canvas>
    <script>
    var c_canvas = document.getElementById("c");
    var context = c_canvas.getContext("2d");
    for (var x = 0.5; x < 500; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x, 375);
    }
    for (var y = 0.5; y < 375; y += 10) {
      context.moveTo(0, y);
      context.lineTo(500, y);
    }
    context.strokeStyle = "#eee";
    context.stroke();

    context.beginPath();
    context.moveTo(0, 40);
    context.lineTo(240, 40);
    context.moveTo(260, 40);
    context.lineTo(500, 40);
    context.moveTo(495, 35);
    context.lineTo(500, 40);
    context.moveTo(495, 45);

    context.moveTo(60, 0);
    context.lineTo(60, 153);
    context.moveTo(60, 173);
    context.lineTo(60, 375);
    context.moveTo(65, 370);
    context.lineTo(60, 375);
    context.moveTo(55, 370);

    context.strokeStyle = "#000";
    context.stroke();
    </script>
  </body>

入門 HTML5

入門 HTML5