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でペイントアプリ作成

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

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

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

More from Yossy Taka

More from Yossy Taka (10)

Recently uploaded

Recently uploaded (9)

Canvasでペイントアプリ作成