web関連

【HTML5・javascript】canvas使って棒人間書いてみた

2019/02/18

2019/02/20

/

【HTML5・javascript】canvas使って棒人間書いてみた

canvasをこれから勉強しようと思ってとりあえず描画したかった時の備忘録

HTML

出力用のcanvasタグを1つ用意

<canvas id="cv" width="200" height="200"></canvas>

 

javascript

棒人間描写してみる

<script>
// 全て読み込まれた後で読み込む
window.onload = function() {
    canvas = document.getElementById('cv');
    // canvasタグに描画するのに必要
    ctx = canvas.getContext('2d');
    // canvasとgetContext()メソッドが使えるかどうか判定(エラー回避用)
    if (!canvas || !ctx) {
    return;
    }
    // 背景塗る
    ctx.fillStyle = '#ccc';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 円を描く(頭の部分)
    ctx.beginPath();
    ctx.strokeStyle = '#000';// 線の色調整
    ctx.lineWidth = 3;// 線の太さ調整
    ctx.arc(100, 50, 40, 0, Math.PI * 2, false);
    ctx.stroke();

    // 線を書く(手の部分)
    ctx.beginPath();
    ctx.strokeStyle = '#000';
    ctx.moveTo(50, 130);
    ctx.lineTo(100, 90);
    ctx.lineTo(150, 130);
    ctx.stroke();

    // 線を書く(縦棒)
    ctx.beginPath();
    ctx.moveTo(100, 90);
    ctx.lineTo(100, 150);
    ctx.stroke();

    // 線を書く(足の部分)
    ctx.beginPath();
    ctx.moveTo(50, 190);
    ctx.lineTo(100, 150);
    ctx.lineTo(150, 190);
    ctx.stroke();
    }
</script>

とりあえずこれで表示はできる
ieも対応しているしモダンブラウザなんかも当然対応しているようなので今後はcanvasも使っていきたい

 

小さな一歩だけど、僕にとっては大きな1歩
次は動かしたいな