WordPress  
  canvasを使って描画する
2018
15
Mar

canvasを使って描画する

最終更新日: 2022年4月15日


まずは見本です。


javascriptとhtmlだけで描くことができます。

詳しい解説は専門家にお任せするとして、今回は直線の描き方から直線をつないでいって三角形を描いてみます。

canvasというと油絵のカンバスを思い浮かべる人も多いでしょう。

html5のcanvasも同じことを指しています。htmlの中のcanvasに絵を描くイメージです。


縦横それぞれ150px 300pxのカンバスを作りました。縦横の長さを指定しなくてもデフォルトでwidth 300 height 150 になります。
後はjavascriptで描画するだけです。


<canvas id="triangle" width="300" height="150"></canvas>


// canvas要素のノードオブジェクト
var canvas = document.getElementById("triangle");

// canvasのメソッドgetContextを使って2Dコンテキストと呼ばれるオブジェクトを取得します。
var ctx = canvas.getContext("2d");

今回使うメソッドは


beginPath(), moveTo(), lineTo(), closePath(), stroke()

です。
なんとなくイメージできそうですね。


ctx.beginPath();

//書き始めの位置
ctx.moveTo(200,40);

//最初の線分の終点
ctx.lineTo(280,140);

//次の線分の終点
ctx.lineTo(120,140);

//開始地点に戻ります
ctx.closePath();

//上記で定義したものを描画します
ctx.stroke();

javascript部分は言うまでもなく、<script>タグの中に書き込みます。

 

青色で囲った部分がカンバスです。その中に三角形が描かれています。
長方形の左上の角が座標軸の原点(0,0)です。
二等辺三角形の頂点が(200,40)です。
順番に頂点を指定してctx.closePath();で出発点に戻ります。
最後にctx.stroke();で描画します。

※高さは正の数でも下に移動します。

下の図はstroke()の代わりにfill()を使ったものです。線分で囲まれたところに色が塗られています。

元の図は（stroke()を使った図）下図になります。


<canvas id="line" width="300" height="150"></canvas>


<script>
    var canvas = document.getElementById("line");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(100,40);
    ctx.lineTo(180,140);
    ctx.lineTo(120,100);
    ctx.lineTo(220,10);
    ctx.fill();
</script>

 

描画したものはpng画像としてダウンロードできます。

ソースを見ればわかりますがpng画像はどこにも読み込んではいません。canvasによる描画であることが分かります。

 

top