canvasに描画 ～Javascript超初心者入門

canvasのサイズについて

canvasが保持する幅と高さのピクセル数は属性「width」と属性「height」で指定します。
canvasのcss(style属性)の幅「canvas.style.width」と高さ「canvas.style.height」は拡大または縮小して画面に表示するサイズを意味します。
以下のHTMLとCSSの場合、canvasが保持しているピクセル数は「50×50」ピクセルで、画面に表示するサイズは「200×100」ピクセルなので、「幅4倍、高さ2倍」に拡大して表示しています。

<canvas id="test1canvas" style="width:200px;height:100px;border:1px solid #666;" width="50" height="50"></canvas>

canvasへの描画

canvasは自身に描画する機能を持ち合わせていません。
描画するには「getContext("2d")」メソッドで返ってくる「描画コンテキスト」を用いて描画します。

//変数ctxに描画コンテキストを取得
let ctx=canvas.getContext("2d");

「描画コンテキスト」を用いて
座標(0,0)-(50,50)-(50,0)
への線を描画します。

<canvas id="test2canvas" style="width:200px;height:100px;border:1px solid #666;" width="50" height="50"></canvas>
<script>
  window.addEventListener("load",function(){
    //キャンバスの取得
    let can=document.getElementById("test2canvas");
    //描画コンテキストの取得
    let ctx=can.getContext("2d");

    //線の幅を指定
    ctx.lineWidth=2;
    //線の色を設定（半透明の青）
    ctx.strokeStyle="rgba(0,0,255, 0.5)";

    //線の描画の開始
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(50,50);
    ctx.lineTo(50,0);
    //線の実際の描画
    ctx.stroke();
  });
</script>

描画コンテキストに設定できるプロパティ値

主な線のスタイル

主な塗りつぶしのスタイル

主な影のスタイル

主な文字のスタイル

描画コンテキストのメソッド

主なパス（複数座標を指定して線を描画したり、線を閉じたり、内部の塗りつぶし）や描画のメソッド

let can = document.querySelector("canvas");
let ctx = can.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(50,50);
ctx.lineTo(50,0);
ctx.fill();
ctx.stroke();

let can = document.querySelector("canvas");
let ctx = can.getContext("2d");
ctx.beginPath();
ctx.arc(25,20,15, 0*Math.PI,2*Math.PI, false);
ctx.fill();
ctx.stroke();

let can = document.querySelector("canvas");
let ctx = can.getContext("2d");
ctx.beginPath();
ctx.ellipse(25,20, 10,8 ,0.25*Math.PI ,1*Math.PI,2*Math.PI);
ctx.fill();
ctx.stroke();

let can = document.querySelector("canvas");
let ctx = can.getContext("2d");
ctx.rect(25,20, 15,20);
ctx.fill();
ctx.stroke();

let can = document.querySelector("canvas");
let ctx = can.getContext("2d");
ctx.fillText("Hello", 15,20);

let can = document.querySelector("canvas");
let ctx = can.getContext("2d");
ctx.strokeText("Hello", 15,20);

let can = document.querySelector("canvas");
let ctx = can.getContext("2d");
let m=ctx.measureText("Hello");
console.log(m.width);

主な座標変換

パスの塗りつぶしと描画

パス(10,10)-(50,60)-(150,80)-(100,20)を半透明赤で塗りつぶし、線を半透明青色で描画します。 closePath()を使っていないので、パスは閉じていません。

<canvas id="test3canvas" style="width:200px;height:100px;border:1px solid #666;" width="200" height="100">
</canvas>

<script>
  window.addEventListener("load",function(){
    //キャンバスの取得
    let can=document.getElementById("test3canvas");
    //描画コンテキストの取得
    let ctx=can.getContext("2d");

    //塗りつぶしの色を設定（半透明の青）
    ctx.fillStyle="rgba(255,0,0, 0.5)";
    //線の幅を指定
    ctx.lineWidth=16;
    //線の色を設定（半透明の青）
    ctx.strokeStyle="rgba(0,0,255, 0.5)";

    //パスの開始
    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(50,60);
    ctx.lineTo(150,80);
    ctx.lineTo(100,20);
    //パスの塗りつぶし
    ctx.fill();
    //パスの描画
    ctx.stroke();
  });
</script>

円弧の塗りつぶしと描画

中心(100,50)、半径30、90度～360度を時計回りの円弧を半透明赤で塗りつぶし、線を青色で影付きで描画します。

<canvas id="test4canvas" style="width:200px;height:100px;border:1px solid #666;" width="200" height="100">
</canvas>

<script>
  window.addEventListener("load",function(){
    //キャンバスの取得
    let can=document.getElementById("test4canvas");
    //描画コンテキストの取得
    let ctx=can.getContext("2d");

    //塗りつぶしの色を設定（半透明の青）
    ctx.fillStyle="rgba(255,0,0, 0.5)";
    //線の幅を指定
    ctx.lineWidth=16;
    //線の色を設定（青）
    ctx.strokeStyle="rgba(0,0,255, 1.0)";
    //影のぼかし設定
    ctx.shadowBlur=4;
    //影の色設定
    ctx.shadowColor="rgb(0,0,0)";
    //影のずらし設定
    ctx.shadowOffsetX=8;
    ctx.shadowOffsetY=4;

    //パスの開始
    ctx.beginPath();
    ctx.arc(100,50, 30, 0.5*Math.PI, 2*Math.PI);
    //パスの塗りつぶし
    ctx.fill();
    //パスの描画
    ctx.stroke();
  });
</script>

文字の塗りつぶしとパスの描画

文字"こんにちは"を線を青色で塗りつぶしを半透明赤色（袋文字）、影付きで描画します。

<canvas id="test5canvas" style="width:240px;height:100px;border:1px solid #666;" width="240" height="100">
</canvas>

<script>
  window.addEventListener("load",function(){
    //キャンバスの取得
    let can=document.getElementById("test5canvas");
    //描画コンテキストの取得
    let ctx=can.getContext("2d");

    //塗りつぶしの色を設定（半透明の赤）
    ctx.fillStyle="rgba(255,0,0, 0.5)";
    //線の幅を指定
    ctx.lineWidth=1;
    //線の色を設定（青）
    ctx.strokeStyle="rgba(0,0,255, 1.0)";
    //影のぼかし設定
    ctx.shadowBlur=4;
    //影の色設定
    ctx.shadowColor="rgb(0,0,0)";
    //影のずらし設定
    ctx.shadowOffsetX=4;
    ctx.shadowOffsetY=2;
    
    //文字のフォント設定
    ctx.font='bold 40px Verdana,Roboto,"Droid Sans","游ゴシック",YuGothic,"メイリオ",Meiryo,'+
             '"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",sans-serif';
    ctx.textBaseline="middle";

    //文字のパスの塗りつぶし
    ctx.fillText("こんにちは", 10,50);
    //パスの描画
    ctx.strokeText("こんにちは", 10,50);
  });
</script>

回転文字の描画

文字"こん"を座標(120,50)に上下左右中央で90度(時計回り)回転して赤色で描画します。

<canvas id="test6canvas" style="width:240px;height:100px;border:1px solid #666;" width="240" height="100">
</canvas>

<script>
  window.addEventListener("load",function(){
    //キャンバスの取得
    let can=document.getElementById("test6canvas");
    //描画コンテキストの取得
    let ctx=can.getContext("2d");

    //塗りつぶしの色を設定（赤）
    ctx.fillStyle="rgb(255,0,0)";
    //文字フォントを設定
    ctx.font='bold 24px Verdana,Roboto,"Droid Sans","游ゴシック",YuGothic,"メイリオ",Meiryo,'+
             '"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",sans-serif';
    ctx.textBaseline="middle";
    ctx.textAlign="center";

    //座標変換
    ctx.resetTransform();
    ctx.translate(120,50);
    ctx.rotate(0.5*Math.PI);

    //文字のパスの塗りつぶし
    ctx.fillText("こん", 0,0);
    //ctx.fillStroke("こん", 0,0);

    //座標変換をリセット
    ctx.resetTransform();
  });
</script>