Canvasでペイントアプリ作成

Canvas入門04
Canvasで簡易ペイントソフト作成

Copyright Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 2
今回の講義内容
• Canvasの描画機能を利用して、ペイン
トソフトを作成
– マウス操作とcanvasの‘線’を利用してペイ
ント機能を実装
– タッチ操作で同様の機能を実装
– マウスとタッチの両方動作するようにする

完成イメージ
カラー変更
太さ変更
画面クリア保存

作業内容の基本
• 線の描画
– 作成する基本的な内容は、
マウス(指)を動かしている時に、マウス座標に
線を描画する
だけです。

まずは、線を描画してみましょう。
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.stroke();
moveTo （0,0）
lineTo （100,100） moveTo （300,100）
lineTo （400, 0）

ペイントの基本仕様
• Canvasのサイズ
– 縦幅：画面縦幅の半分
– 横幅：画面横幅に合わせる
• 背景用四角形の描画
– Canvasと同じサイズ、塗り白色の四角形を描画
• Canvas上の操作
– タッチ、マウスの両方で動作可
• ペンの初期値
– 太さ：2px
– 色：赤色

ペイントの基本仕様
• Canvasのサイズ
– 縦幅：画面縦幅の半分
– 横幅：画面横幅に合わせる
• 背景用四角形の描画
– Canvasと同じサイズ、塗り白色の四角形を描画
• Canvas上の操作
– タッチ、マウスの両方で動作可
• ペンの初期値
– 太さ：2px
– 色：赤色
課題

描画操作の流れ
• touchstart / mousedown（画面をタッチ・マウスダウンした時）
– 線の色や太さを指定する
– タッチした座標で moveTo()
– ？
• touchmove / mousemove（画面上をドラッグした時）
– 移動後の座標で lineTo()
– stroke() する
• touchend / mouseup（画面から指・マウスを離した時）
– ？

まずはPC用に
マウス操作

ユーザ入力による制御
• マウスなどのユーザ操作(イベント)の制御方法
記述例
対象要素.addEventListener( ’ユーザ操作’, function(e){
実行したい内容;
});

マウス操作
• 主なマウスイベント(ユーザ操作)
– click クリック
– dblclick ダブルクリック
– mouseout 要素上からマウスが離れた
– mouseover 要素上にマウスが乗った
– mousedown マウスボタン押した
– mouseup マウスボタンを離した
– mousemove マウスが動いた
• マウス座標の取得（引数を利用）
– e.pageX : マウスポインタがある X 座標
– e.pageY : マウスポインタがある Y 座標

マウス操作
• 下記のイベントの違いを確認しよう
– click クリック
– mousedown マウスボタンを押した
– mouseup マウスボタンを離した

動きが変！

描画操作の流れ
• touchstart / mousedown（画面をタッチ・マウスダウンした時）
– 線の色や太さを指定する
– タッチした座標で moveTo()
– 描画開始したことを覚える（フラグ）
• touchmove / mousemove（画面上をドラッグした時）
– 移動後の座標で lineTo()
– stroke() する
• touchend / mouseup（画面から指・マウスを離した時）
– 描画終了したことを覚える（フラグ）

マウスダウン直後か
どうか判断する

If文と変数で
実現できます

この変数を
フラグと言います

スマホ用に
タッチ操作

ユーザ操作
• タッチ操作
– touchstart : タッチしたとき
– touchmove : タッチしたまま動かしたとき
– touchend : タッチ状態から離れたとき
• タッチ座標
– event.changedTouches[0].pageX
: タッチされている画面位置の X 座標
– event.changedTouches[0].pageY
: タッチされている画面位置の Y 座標

共通のコードで
動作確認したい

jQueryを使って
簡略化

今回の使い方
• onを使う
– onを使うと、複数同時にイベントを設定できる
セレクタ.on(’操作1 操作2’, function(e){
実行したい内容;
});

タッチ環境かどうか確認
• 確認方法
• 結果
– true だとタッチ環境、false だとマウス環境
– 上記を判断して、JSの記述を分岐する
('ontouchstart' in window)

スマホのブラウザで
操作してみよう

注意点
• クリックやタッチは、他のコンテンツでも
反応
– PCの場合：<a>タグなど
– スマフォの場合：ページスクロールなど
• 回避方法
– e.preventDefault()

タッチすると
画面が青くなる

タッチすると画面が青い
• Androidのブラウザの仕様
– CSSで解決
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

カラーの変更
• 赤、青、緑、黄、黒
– <ul><li>タグを利用して、CSSで背景色を指
定してボタンを作成
• 設定手段
– 各<li＞タグを、touchstart / mousedown し
たら、線の色を指定の色に変更する

カラーの変更
• タッチ処理に、同じような設定が多くて
面倒
• 処理を一つにまとめたい
– ＜li＞タグの背景色をそのまま利用して、一つ
の処理にまとめる

ペンサイズの変更
• 線の太さを変更
– <ul><li>タグを利用して、2px、4px、6pxに
変更できるボタンを作成
• 設定手段
– 各<li＞タグを、touchstart / mousedown し
たら、線の太さを変更

ペンサイズの変更
• タッチ処理に、同じような設定が多くて
面倒
• 処理を一つにまとめたい
– ＜li＞タグの文字をそのまま利用して、一つの
処理にまとめる

クリアボタン
• 画面を真っ白に変更
– <ul><li>タグを利用して、ボタンを作成
• 設定手段
– <li＞タグを、touchstart / mousedown した
ら、clearRectをして、白色の矩形を描画し
直す

画像保存
• Canvasの問題点
– canvasのデータは、そのまま画像ファイルと
して保存できない。
• 実現手段
– Imgタグとして表示して、ブラウザの機能で
保存する

画像形式に変換
• canvasデータを画像形式に変換
– <ul><li>タグを利用してボタンを作成し、ボタ
ンを押したら、変換したデータを<img>で表
示
• 変換方法
– canvas. toDataURL()
• 画像のアドレスとして生成される
• 生成されたアドレスを利用して、imgタグで表示
• HTML上に<div>タグを記述し、その中にimgタグ
を追加する

タグの生成方法
• タグの生成
オブジェクト名＝ document.createElement(“タグ名”);
• 属性の追加
オブジェクト名.属性名＝値;
• タグ内への文章追加
オブジェクト名. innerHTML ＝値;
• タグへのCSS指定
オブジェクト名. style.プロパティ＝値;

タグの追加方法
• ID指定でのタグの追加
document.getElementById(“id名”).appendChild(オブジェクト名);
• タグ指定でのタグ追加
var 親オブジェクト名＝
document.getElementByTagName (“親タグ名”);
親オブジェクト名[何番目].appendChild (オブジェクト名);

次回までの課題
• ボタンなどの見た目をデザインしてみよう
• 可能であれば、オリジナル機能を追加してみよう。

Canvasでペイントアプリ作成

More Related Content

Viewers also liked

Similar to Canvasでペイントアプリ作成

More from Yossy Taka

Canvasでペイントアプリ作成