JavaScriptを書いた事のない人向けの 『canvasをゼロ

JavaScriptを書いた事のない人向けの
『canvasをゼロから勉強するぞ！』
の巻
CSS Nite in OSAKA, Vol.19 / Hideki Akiba
2009年9月28日月曜日
canvasタグとは？
2009年9月28日月曜日
canvasタグとは？
•ブラウザ上に直接、図を描くためのもの
•条件に応じて変化する図形（グラフなど）今ま
でFlashなどを使っていましたが、HTML5で
はブラウザに描画できるようにcanvasタグが
準備されます。
2009年9月28日月曜日
canvasタグとは？
出来る事と言えば・・・
線や円といった図形
を描いたり、色を
塗ったりすることが
可能
http://www.html5.jp/ より
2009年9月28日月曜日
しかし・・・
JavaScriptの知識が
若干必要らしいっ・・・
プログラミングか∼
難しそうだ・・・
http://www.html5.jp/ より
2009年9月28日月曜日
僕らにとって、難しく考える
んじゃなくって、ちょっとず
つでも良いから勉強しときま
しょう。
2009年9月28日月曜日
ご一緒に
デザイナー・プログラミング未経験者のための
canvas入門講座
2009年9月28日月曜日
canvasタグの書き方
<canvas id="test" width="600" height="300"></canvas>
id名をつけると楽。
2009年9月28日月曜日
canvasタグの書き方
<canvas id="test" width="600" height="300"></canvas>
id名をつけると楽。
このタグ（要素）をJavaScriptであつかうために
2009年9月28日月曜日
canvasタグの書き方
<canvas id="test" width="600" height="300"></canvas>
このおまじない・・見た事ないですか？
getElementById()
JavaScriptの超有名な、おまじないです。
2009年9月28日月曜日
canvasタグの書き方
<canvas id="test" width="600" height="300"></canvas>
getElementById(“test”)
エレメント（要素）をゲット！
id名によってゲットする！！
2009年9月28日月曜日
canvasタグの書き方
実際にはこう書きます。
var cv = document.getElementById(“test”);
cv、という変数のなかに、
canvasタグが入れられた
2009年9月28日月曜日
canvasタグの書き方
var cv = document.getElementById(“test”);
if (cv . getContext) {
もしも！？
ブラウザが
canvas
をサポート
していたら
2009年9月28日月曜日
canvasタグの書き方
var cv = document.getElementById(“test”);
if (cv . getContext) {
}
2009年9月28日月曜日
canvasに対応していたら
このなかに書いたプログラムが
実行されます。
canvasタグの書き方
var cv = document.getElementById(“test”);
if (cv . getContext) {
var ctx = cv.getContext("2d");
}
まずはコレ！
canvasの中身を、
変数ctxで扱えるようになる。
2009年9月28日月曜日
canvasタグの書き方
var cv = document.getElementById(“test”);
if (cv . getContext) {
var ctx = cv.getContext("2d");
この｛｝の中に
ctxをドットでつないで、
図形を描く命令がかけます。
}
2009年9月28日月曜日
canvasタグの書き方
var cv = document.getElementById(“test”);
if (cv . getContext) {
var ctx = canvas.getContext("2d");
例えば・・・
この｛｝の中に
ctxをドットでつないで、
図形を描く命令がかけます。
}
2009年9月28日月曜日
canvasタグの書き方
var cv = document.getElementById(“test”);
if (cv . getContext) {
var ctx = cv.getContext("2d");
ctx.fillRect(0,0,100,50);
}
ctxをドットでつないで、
こう書きます。
2009年9月28日月曜日
四角形ができました。
canvasタグの書き方
var cv = document.getElementById(“test”);
if (cv . getContext) {
var ctx = canvas.getContext("2d");
ctx.fillRect(0,0,100,50);
}
2009年9月28日月曜日
canvasタグの書き方
ctx.fillRect( 0 , 0 , 100 , 50);
X座標 Y座標 横の長さ 縦の長さ
2009年9月28日月曜日
canvasタグの書き方
fillRect()の他に・・・
2009年9月28日月曜日
canvasタグの書き方
fillRect()の他に・・・
arc() …円弧
lineTo() …直線
bezierCurveTo() …3次ベジェ曲線
quadraticCurveTo() …2次ベジェ曲線
他、色々・・・
2009年9月28日月曜日
canvasタグの書き方
チャレンジ！
直線を書いてみよう
2009年9月28日月曜日
canvasタグの書き方
線を描くとき最初に開始点を決めます。
ctx.moveTo(10, 10);
X座標が10px、Y座標も10pxの位置
からスタート！
チャレンジ！
直線を書いてみよう
2009年9月28日月曜日
canvasタグの書き方
線を描くとき最初に開始点を決めます。
ctx.moveTo(10, 10);
ctx.lineTo(90, 90);
X座標が90px、Y座標も90pxの位置
まで線を引く！
チャレンジ！
直線を書いてみよう
2009年9月28日月曜日
canvasタグの書き方
最後に「線で結びなさい」と命令します。
ctx.moveTo(10, 10);
ctx.lineTo(90, 90);
ctx.stroke();
塗りなのか？線なのか？
それを教えてあげないと、何も描いてくれない。
チャレンジ！
直線を書いてみよう
2009年9月28日月曜日
線が引けました
canvasタグの書き方
最後に「線で結びなさい」と命令します。
ctx.moveTo(10, 10);
ctx.stroke();
ctx.stroke();
塗りなのか？線なのか？
それを教えてあげないと、何も描いてくれない。
チャレンジ！
直線を書いてみよう
2009年9月28日月曜日
canvasタグの書き方
HTML内の数字を引っ張ってきて
棒グラフを作ってみよう。
2009年9月28日月曜日
canvasタグの書き方
こんな事ができるかも・・・
<tr><th>2006</th><td>150</td></tr>
<tr><th>2007</th><td>220</td></tr>
<tr><th>2008</th><td>360</td></tr>
<tr><th>2009</th><td>280</td></tr>
HTML内の情報を拾って
canvasのグラフに描画する!?
2009年9月28日月曜日
canvasタグの書き方
ctx.moveTo(0, 300);
2009年9月28日月曜日
canvasタグの書き方
下から数えるのではなく
上からの座標なので
高さ-50=250
ctx.lineTo(100, 250);
2009年9月28日月曜日
canvasタグの書き方
下から数えるのではなく
上からの座標なので
高さ-200=100
ctx.lineTo(600, 100);
2009年9月28日月曜日
canvasタグの書き方
結果サンプルはこちら
http://www.akibahideki.com/html5/cssnite0927/bar.html
下から数えるのではなく
上からの座標なので
高さ-200=100
ctx.lineTo(600, 100);
2009年9月28日月曜日
canvasタグの書き方
ctx.fill( );
ctx.stroke();
線だけじゃなくって
塗りつぶしなさい！
デフォルトカラーの黒で、
始点と終点が塗りつぶされます。
2009年9月28日月曜日
canvasタグの書き方
結果サンプルはこちら
http://www.akibahideki.com/html5/cssnite0927/
bar_color.html
ctx.fill( );
ctx.stroke();
線だけじゃなくって
塗りつぶしなさい！
デフォルトカラーの黒で、
始点と終点が塗りつぶされます。
2009年9月28日月曜日
canvasタグの書き方
ctx.strokeStyle="#0000ff";
線の色を青にします
ctx.fillStyle="#ff0000";
塗りの色を赤にします
ctx.lineWidth=3;
線の太さを3pxにします
2009年9月28日月曜日
canvasタグの書き方
結果サンプルはこちら
ctx.fill( );
http://www.akibahideki.com/html5/cssnite0927/
bar_color2.html
ctx.stroke();
線だけじゃなくって
塗りつぶしなさい！
デフォルトカラーの黒で、
始点と終点が塗りつぶされます。
2009年9月28日月曜日
canvasタグの書き方
ctx.shadowBlur=300;
ドロップシャドウのぼかし量
ctx.shadowColor = "#000000";
ドロップシャドウの色を黒にします
2009年9月28日月曜日
canvasタグの書き方
結果サンプルはこちら
ctx.fill( );
http://www.akibahideki.com/html5/cssnite0927/
bar_blur.html
ctx.stroke();
線だけじゃなくって
塗りつぶしなさい！
デフォルトカラーの黒で、
始点と終点が塗りつぶされます。
2009年9月28日月曜日
canvasでユーザに
図形を描かせる！？
2009年9月28日月曜日
3次ベジェが標準で備わっているので、
いつものペンツール、あんな感じで図形が
作れないかな？
無謀にも
挑戦
2009年9月28日月曜日
ctx.moveTo( A , B );
ctx.bezierCurveTo( C , D , E , F , G , H );
C ,D
E ,F
A ,B
G ,H
2009年9月28日月曜日
ctx.moveTo( A , B );
ctx.bezierCurveTo( C , D , E , F , G , H );
結果サンプルはこちら
http://www.akibahideki.com/html5/cssnite0927/bezier.html
C ,D
E ,F
A ,B
G ,H
2009年9月28日月曜日
アンカーポイントやハンドルを
ドラッグさせて、図形を保存してみよう
http://www.akibahideki.com/html5/cssnite0927/drag.html
2009年9月28日月曜日
まとめ
2009年9月28日月曜日
まとめ
JavaScript + canvas で動作する
Adobe Illustratorみたいなアプリ、
出てもおかしくなさそう。
2009年9月28日月曜日
まとめ
html5-developers-jpより
canvasにまつわる耳寄りな情報。
JavaScript+Canvasでファミコンをエミュレート
●NESエミュレータ
http://twoseater.bob.buttobi.net/
●実際の動画
http://www.nicovideo.jp/watch/sm6273681
2009年9月28日月曜日
Flashはどうなるの？
Canvasだけで、すべての用途を満たせるわけではありません。
複雑な図形描写やアニメーションであれば、Flashに軍配があがるといえます。
しかし、CanvasはFlashの代替えではありません。
それぞれの特性を理解したうえで、状況に応じた選択をすべきでしょう。
（HTML5.JPサイト運営者 羽田野 太巳 氏）
Flash →
フレームが再生されるたびに処理を実行する
ENTER_FRAMEという概念がある。
JavaScript + canvas →
canvasの仕様にアニメーションのメソッドが無く、
時間毎に画面を書き直す、という処理が必要。
2009年9月28日月曜日
ご清聴ありがとうございました。
またいつかどこかでお会いしましょう。
CSS
Nite
in
OSAKA,
Vol.19
秋葉秀樹
2009年9月28日月曜日