HTML5手習い

Canvasを画像として扱う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Canvasオブジェクト自身を画像オブジェクトの一種として扱えることを学びます。サンプルとして、簡単なペイントプログラムを作成します。
講師:
09:11

字幕

このレッスンでは キャンバスオブジェクトが そこに描画された図形を 表示するだけではなく それ自身が一種の画像オブジェクトとしても 扱えることを説明します まず はじめに canvas_basic.html を テキストエディタと  Google Chrome で開いてください このレッスンでは ごく簡単な ペイントプログラムの様なものを作成し そこに描かれた図形を 画像として扱えることを示します それではまず Canvas を使って ペイントプログラムの様なものを 作成しましょう まずは キャンバスオブジェクトを取得します canvas = docment.getElementById 「 canvas 」の ID は「 sketch 」です そして コンテキストオブジェクトを 取得します getContext('2d') そして キャンバスを とりあえず白く塗りつぶしましょう 「 fillStyle 」を「 white 」に指定します そして「 fillRect 」で塗りつぶし 「 canvas.width 」と「 canvas.height 」を 使って全体を塗りつぶします リロードすると 「 fillRect 」の「 l 」が 1文字足りませんでした 白く塗りつぶされました それでは マウスイベントを使って お絵かきができるようにしていきましょう まず マウスが押されているかどうかを 保持するための変数を作ります 初期状態では押されていないので 「 false 」です それから「 canvas. addEventListener 」で まずは mousedown の event を取ります また 今回使用する event は mousedown 以外に mouseup それから mousemove です mousedown はユーザーが マウスの左ボタンや その他のボタンを 押した時に発生するイベント mouseup はそのボタンを放した時に 発生するイベント mousemove はユーザーが マウスを動かした時に発生するイベントです マウスが押された時には pressed 変数を「 true 」にしましょう そして マウスが放された時には 「 pressed 変数]を「 false 」にします これで「 pressed 」という変数には マウスの押下状態が入っていることになります そして もしマウスが押されているならば マウスが動かされた時には 円を描画します 「 fillStyle 」は「 black 」 そして「 beginPath 」で パスの指定を開始し 「 arc 」でマウスの位置に円を描きます マウスの位置は「 event.offsetX 」 「 offsetY 」で取れます 半径 3 円なので始点・終点は 0から2π (パイ) そして「 fill 」で塗りつぶします これでペイントプログラムは完成です 何かエラーがあるようですね 「 pressed 」の変数名が間違っていました 一番最初の定義の部分です それから 「beginPath 」の メソッドの名前が間違っていました これで再度リロードすると この様に キャンバスの上に クリックしている間 丸を描くことができます ちなみにムーブされている間だけ 点を描画するプログラムなので ムーブの間隔が空いているため この様にマウスを早く動かすと 点と点の間が空いてしまいます これを点による描画ではなく 「 moveTo 」と「 lineTo 」を使っての 線での描画に変えれば 線がつながるようになります これは皆さんで試してみてください それではこのキャンバスオブジェクトを 画像として扱ってみましょう まず 画像として貼り付けることが できることを示すために キャンバスをもう1つ作成します 貼り付け先のキャンバスです そして 貼り付けるトリガーになる ボタンを作りましょう 「 copy 」というボタンをクリックした時には もう1つのキャンバスに ユーザーが描いた画像がコピーされます それから もう1つボタンを作ります 「 apply 」というボタンを ユーザーが押した時には ユーザーが描いた画像が HTML そのものの画像になります さて それぞれの動作を記述しましょう 「 document.getElementById 」の 「 copy 」に対して 「 EventListener 」を設定 「 addEventListener 」 の「 click 」した時 それか「 apply 」ボタンについても同様です これらの中身は「 copy 」がクリックされた時は まず「 document.getElementById 」で キャンバスオブジェクトを取得します コピー先のキャンバスオブジェクトです キャンバスオブジェクトを取得して 「 getContext(' 2d') 」で コンテキストを取得します そして「 drawImage 」 「 drawImage 」の1番目のパラメーターは 画像オブジェクトでした キャンバスオブジェクト自身が 画像オブジェクトとして扱えます するとキャンバスオブジェクトの中に 保持されている画像が もう1つのキャンバスにコピーされます コピー先は「 0, 0, 100, 100 」とします 起点が 0, 0 そして幅と高さが 100 ピクセル 100ピクセルです また もう一方の動作として 「 apply 」ボタンが押された時は 「 document.body. style.backgroundImage 」 CSS の バックグラウンド画像を 画像URL で指定します そして そこには 「 canvas.toDataURL 」 というメソッド使用します このメソッドを使うと キャンバスの画像をそのまま Base 64 エンコードされた 画像データとして取得できます これでリロードして 何か適当な絵を描いてみます この様に ユーザーが描いた絵を 「 copy 」を押すと もう1つのキャンバスに 今 描いたものと同じデータが 描画されました また「 apply 」を押すと この様にユーザーが描いたデータが HTML の背景画像にそのままなりました また この「 toDataURL 」で 取得したデータを サーバー側に転送したり などといった利用の仕方もできます このレッスンでは キャンバスオブジェクトが 一種の画像オブジェクトとして 扱えることを説明しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。