Canvas入門01－図形描画とJS活用－

Canvas入門01
Canvas図形描画の基礎

HTML5の
JavaScript
Copyright Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 2

HTMLとHTML５の違い
従来のHTMLの内容
HTML５の内容
要素(タグ) JavaScript
h1,canvas,video
など
canvas描画,データ保
存, 端末傾き,video制御
要素(タグ)
h1, body, pなど

Canvasについて

canvasとは
• HTML5で、新しい規格として標準化され、直接ブラウザ
に図形描画やアニメーションができる
• 幅広い表現が出来るため、アプリ制作に必須かつ主要の
技術である
• HTMLのcanvas要素に対して、JavaScriptで描画する
– 他のHTMLやCSSを使わず、JSのみで描画を行う
• IE9以降、Firefox、Google Chrome、Safari、Operaな
ど全ての主要ブラウザで実装済み

今回の講義内容
• Canvasの基礎を学習する
– 描画機能の確認
• 四角形、円形、文字などの図形を描画する
– 描画機能とJS制御文の活用
• for文やランダムなど、JSの構文と組み合わせて利
用する

まずは、じっくり
canvasの基礎を学習しよう

canvas要素の書式
• img要素とよく似ている
• id属性の値をJavaScriptで特定して、
コンテキストを作成してコントロールする
<canvas id="example" width="400" height="300"></canvas>

セレクタの指定方法
• 現時点ではjQueryを使わずに行う
– jQueryの外部JSファイルを読み込む分だけ、
若干初期動作が遅くなる。
– jQueryを多用しないのであれば、使用しない
方が良い。
• JavaScriptによるセレクタ指定方法
– JavaScriptでは、このセレクタ指定がキモ！！

JavaScriptによるセレクタ指定
• idによるHTML要素の指定
• Canvas描画用コンテキストの生成
var オブジェクト＝ document.getElementById('id')
var ctx = オブジェクト.getContext('2d');

canvas要素の書式
• 実際にcanvas要素を記述しよう。
– 分かりやすいように、CSSでCanvas要素に
borderを指定

図形を
描画しよう

矩形

canvas要素に矩形を描画
• 矩形
– 塗られた矩形を描く
コンテキスト. fillRect(x, y, width, height)
– 矩形の輪郭を描く
コンテキスト. strokeRect(x, y, width, height)
– 指定された領域を消去
コンテキスト. clearRect(x, y, width, height)

canvas要素に矩形を描画
0
Canvas要素
Y
X
（20px, 10px）
ctx.fillRect(20, 10, 150, 100)
150px
100px

直線

• 直線(パス)
– パスの開始
コンテキスト. beginPath()
– パスの始点を指定する
コンテキスト. moveTo(x, y)
– パスの次点を指定する
コンテキスト. lineTo(x, y)
– パスを閉じる
コンテキスト. closePath()
– 線でパスを描く
コンテキスト. stroke()
– 塗り潰しでパスを描く
コンテキスト. fill()
– 線の太さ
コンテキスト. lineWidth
canvas要素に直線を描画

0
Canvas要素
Y
X
（20px, 10px）
ctx.beginPath();
ctx.moveTo(20,10);
ctx.lineTo(60,30);
ctx.lineTo(40,80);
ctx.closePath();
ctx.stroke();
（60px, 30px）
（40px, 80px）

円

• 円や円弧
– x, y：円の中心座標
– radius：半径
– startAngle, endAngle：円弧の始点と終点をラジアン
角で定義 (ラジアン：0～2πで一周する角度の単位)
– anticlockwise：円弧を描く回転方向を指定
左回り true、右回り false
コンテキスト. arc(x, y, radius, startAngle, endAngle, anticlockwise);
canvas要素に円形を描画

ラジアン = π × 度 ÷ 180
ラジアン
• 角度について
– canvasで使用する角度は、一般的な「度」で
はなく、ラジアン（radian）を利用します。
– 度とラジアンの関係は以下の通り
• 90度 = 0.5πラジアン
• 180度＝ πラジアン
• 360度 = 2πラジアン

0
Canvas要素
Y
X
ctx.beginPath();
ctx.arc(100,100,160,0,Math.PI*1.5,false);
ctx.stroke();

色

• 色
– 色を図形に適用するためのプロパティ
• 塗りの色
コンテキスト. fillStyle
• 線の色
コンテキスト. strokeStyle
– 色は、16進数や10進数によるRGB値で指定する
• #ffffff
• rgb(255,255,255)
• rgba(255,255,255,1)
canvas要素に図形を描画しよう

記述ミスの確認
• Google Chromeで確認ができる
– [要素を検証] → [Console] で、エラーの確認
ができるので、使い慣れてください。
– 正しく動かない場合には、まず上記操作を行
なってください。

画像

• 画像読み込み
– Imageオブジェクトの作成
var オブジェクト名 = new Image();
– 画像ファイルアドレスを指定
オブジェクト名.src = ファイルパス
– 画像の表示
コンテキスト. drawImage(オブジェクト名, 横位置, 縦位置)
コンテキスト. drawImage(オブジェクト名, 横位置, 縦位置, 幅, 高さ)
canvas要素に画像を読み込もう

画像読み込みの基本的な書式
• 画像読み込みが完了してから実行
var img = new Image();
img.src = ‘ファイルパス’;
img.onload = function(){
コンテキスト.drawImage(img,100,100);
}

文字

• 文字表示
– フォント指定
コンテキスト. font = ‘スタイルサイズファミリー名’;
記述例：‘bold 20px sans-serif’
– 文字の縁線を描画
コンテキスト. strokeText( 文字, 横位置, 縦位置);
– 文字の塗りつぶし
コンテキスト. fillText( 文字, 横位置, 縦位置);
canvas要素に文字を表示しよう

JS制御文との
組み合わせ

線を繰り返し描画してみよう
• 水平線を3本、まずは人力で書いてみよう
moveTo(10,10) lineTo(300,10)
moveTo(10,30)
moveTo(10,50)
lineTo(300,30)
lineTo(300,50)
20px
20px

線を繰り返し描画してみよう
• この水平線を100本、1万本をこの方法で
描画するのは大変です。
• ここでfor文で、描画動作を繰り返して
線を30本描画してみよう。

for文の確認
• for文とは
– 特定の回数、繰り返し処理することができる
for( 変数初期化; 繰り返し条件; 変数の増減式) {
繰り返したい処理;
}

for文の確認

色をランダム

for文とランダム

ランダムを
学習

Mathオブジェクト

Mathオブジェクトとは
• 数学(mathematics)的な高度な演算を行う
ことができる。
• 使用方法
– Math.メソッド()
– Math.プロパティ

• ランダムを学習しよう
– ランダムを扱うのは、JavaScriptの基本です
• JavaScriptのランダムとは
– 不規則な数値を作成する
• 例：くじ引き、自然現象、物体の配置、広告などの表示
学習内容

ランダム
• まずは、ランダムの内容を確認しましょう。
– ランダムな値を作成
Math.random()；

変数などの値の確認
• デバッグ手法
console.log(変数);
• Google Chromeで確認ができる
– Consoleでは、エラーの確認もできるので、
使い慣れてください。

ランダム

ランダム
• Math.random()
0 以上 1 未満の範囲で疑似乱数を生成

ランダム
• ランダム数値に100をかける
Math.random()*100;

ランダム
• ランダム数値に100をかけ小数以下を削除
Math.floor(Math.random()*100);

ランダムの基本
• 自分で必要な数値の範囲を作り出すこと
– 使用する命令は、主に
Math.random()
Math.floor()
となります。
あとは＋＊ー / を使って必要な「数値範囲」を作
ることが唯一のポイントです。
つまり、プログラミングというよりは、計算力が必
要となります。

主なMathオブジェクトの確認
• JavaScriptのリファレンスはブラウザベン
ダーが用意しているので確認すること
– MSDN(IE)
– MDN(Firefox)

数値を整数に丸める
• 数値を整数にする方法
– Math.floor(数値)
• 引数として与えた数以下の最大の整数を生成→小数点以下切り
捨てのような感じ（マイナス値に注意）
– Math.round(数値)
• 引数として与えた数を四捨五入
– Math.ceil(数値)
• 引数として与えた数以上の最小の整数を生成→小数点以下繰り
上げのような感じ（マイナス値に注意）
– parseInt(数値)
• 小数点以下切り捨て、または文字列を数値に変換などに利用

数値を整数に丸める
• 数値を整数にする方法(特殊例)
– JavaScriptはシフト演算子やビット演算子を使用する
とき整数に対して行う、という特性を活かした方法
– 数値>>0
• シスト演算子を用いた方法
• 右へ0ビットシフトするので、そのままの数値が返されるが、
整数に対してのみ実行されるので、小数が切り捨てられる
– 数値|0
• ビット演算子を用いた方法
• ORを用いるとそのままの数値が返されるが、整数に対しての
み実行されるので、小数が切り捨てられる

数値の範囲を作るとは
• ランダムを使ったサイコロを作ってみよう
– サイコロは、１・２・３・４・５・６なので、
１～６までのランダムな数値範囲を作成する

次回まで課題（宿題）
• 矩形（30px × 30px）を縦・横に10px間隔に10個ずつ並べてみよう
• 色はランダムで設定しよう。
• 可能であれば、サイズ変更などのアレンジを追加してみよう。
10px
10個
10個

Canvas入門01－図形描画とJS活用－

More Related Content

Similar to Canvas入門01－図形描画とJS活用－ (20)

More from Yossy Taka (14)

Recently uploaded (12)

Canvas入門01－図形描画とJS活用－