JavaScript(canvas)の学習

概要HTMLの学習CSSの学習JavaScriptの学習JavaScript(canvas)の学習JavaScript(レベルアップ編)の学習サイトマップホーム




モード:パソコンスマホ

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は高さ

HTML ソース 

演習問題1

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

Step2 直線の描画

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

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

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

HTML ソース 

演習問題2

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

Step3 テキストの描画

テキストの描画

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

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

HTML ソース 

演習問題3

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

Step4 曲線の描画

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

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

演習問題4

  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の範囲指定は省略できます。
HTML ソース 

演習問題5

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

概要HTMLの学習CSSの学習JavaScriptの学習JavaScript(canvas)の学習JavaScript(レベルアップ編)の学習サイトマップホーム