JavaScript(canvas)の学習

JavaScriptのcanvasで自由に図形・画像などを描画してビジュアルなコンテンツを作り出すことができます。

Step1 図形の描画

キャンバスの定義

• HTMLで<canvas id="キャンバスID" width=幅height=高さ></canvas>で定義します。
• contextの定義
  canvas = document.getElementById("キャンバスID");
  context = canvas.getContext"2d");

スタイルの定義

• 線の色：context.strokeStyle ="色"
• 線の太さ：context.lineWidth =太さ
• 塗りつぶしの色：context.fillStyle ="色"

描画

• 長方形の塗りつぶし：context.fillRect(x, y, w, h)
• 長方形の線を書く：context.strokeRect(x, y, w, h)
• 円の作成：context.arc(x,y,半径,開始角度,終了角度,円弧の作成方向)
  円弧の作成方向を反時計回り（true）、または、時計回り（false）で指定
• 塗りつぶす：context.fillRect(x, y, w, h)
• 線を書く：context.strokeRect(x, y, w, h)

　※xはx座標、yはy座標、wは幅、hは高さ

演習問題１

1. 線の色を黒（black）に、塗りつぶしの色を黄色（yellow）に変更しましょう。
2. 円の描画を半円にしましよう。

Step2 直線の描画

直線を描画して塗りつぶします。

• パスの開始（リセット）：context.beginPath()
• パスを閉じる：context.closePath()
  図形を閉じます。図形が閉じていない場合は直線を描いて閉じます。
• 開始座標の指定：context.moveTo(x,y)
• 線を引く：context.lineTo(x,y);

　※xはx座標、yはy座標

演習問題２

1. 閉じない図形を描いてみましょう。
2. 上記の状態でclosePath()がない場合の描画違いを確認しましょう。

Step3 テキストの描画

テキストの描画

• フォントサイズ、フォント名：context.font = "40pt Arial"
• テキストを塗りつぶす：context.fillText("text",x,y)
• テキストを線で書く：context.strokeText("text",x,y)

　※xはx座標、yはy座標

演習問題３

1. 字体を「ＭＳ 明朝」に変更してみましょう。
2. 塗りつぶしと線で書いてみましょう。

Step4 曲線の描画

　Sinカーブを書いてみましょう。

• 描画開始のｙ座標を求めます。（ｘ座標の開始は0から）
• ｘ座標0からｘ座標がキャンバスのサイズまで以下の処理をします。
  
  • ｘ座標の値よりｙ座標の値を求めて、前回描画した位置から線を引きます。
  • ｘ、ｙの値を保存して、次の描画開始座標にします。
• 描画位置の設定完了で線を書き出します。

演習問題４

1. Sinカーブの中を塗りつぶしてみましょう。
2. 横軸描画範囲をx=0～8πに変更しましょう。
3. 横軸描画範囲をx=0.5π～4.5πに変更しましょう。

Step5 画像の描画

　画像（横640px、縦480pxの写真）をcanvasに描画します。

• img = new Image()で img 要素を作成して、img.srcで画像ソースのパスを設定します。
• 画像の読込完了処理をloadイベントハンドラを使用しています。
• drawImage() メソッドで画像座標xyサイズwhを表示座標xyサイズwhに表示します。
  drawImage(画像x,画像y,画像w,画像h,表示x,表示y,表示w,表示h)
  画像xywhの範囲指定は省略できます。

演習問題５

1. 画像を１０分の１に縮小して、表示しましょう。
2. 縦240px、横240pxに変更して、表示しましょう。
3. 画像の左から160px～480px、上から120px～360pxをキャンバスに表示しましょう。