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>

Javascript超初心者入門目次

• Javascriptとは
• Javascriptの変数、配列、連想配列
• Javascriptのfor文とif文とは
• Javascriptで要素(タグ)を追加削除
• イベント処理(ボタンが押されたら実行等)について解説
• タイマー(setTimeoutとsetInterval)を使って指定秒数後に処理を行ったり定期的に処理を行う方法について解説
• canvasに描画する方法について解説
• Javascriptで要素を取得する方法