paint tool 2013-05-14
Post on 04-Dec-2014
704 Views
Preview:
DESCRIPTION
TRANSCRIPT
ペイントツール
ペイントツール
ペイントツール描画ツール
ペイントツール描画ツール
ポインティングデバイス
ペイントツール描画ツール
Draw系ドロー
Paint系ペイント
ポインティングデバイス
ペイントツール描画ツール
Draw系ドロー
Paint系ペイント
Vector形式ベクター
Raster形式ラスター
ポインティングデバイス
ペイントツール描画ツール
Draw系ドロー
Paint系ペイント
Vector形式ベクター
Raster形式ラスター
ピクセル座標・方向・距離
ポインティングデバイス
ペイントツール描画ツール
Draw系ドロー
Paint系ペイント
Vector形式ベクター
Raster形式ラスター
ピクセル座標・方向・距離
ポインティングデバイス
ペイントツール描画ツール
Draw系ドロー
Paint系ペイント
Vector形式ベクター
Raster形式ラスター
ピクセル座標・方向・距離
ポインティングデバイス
マッシュアップ
マッシュアップWebプログラミング
マッシュアップWebプログラミング
複数のWebサービスのAPIを組み合わせ，あたかもひとつのWebサービスのようにする機能のこと。
http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
マッシュアップWebプログラミング
複数のWebサービスのAPIを組み合わせ，あたかもひとつのWebサービスのようにする機能のこと。
http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
マッシュアップWebプログラミング
複数のWebサービスのAPIを組み合わせ，あたかもひとつのWebサービスのようにする機能のこと。
http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
ITの深い知識がなくても，既存のWebサービスを組み合わせて，短期間でアプリケーション開発ができることから，新しい開発技法として注目されている。
マッシュアップWebプログラミング
複数のWebサービスのAPIを組み合わせ，あたかもひとつのWebサービスのようにする機能のこと。
http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
ITの深い知識がなくても，既存のWebサービスを組み合わせて，短期間でアプリケーション開発ができることから，新しい開発技法として注目されている。
マッシュアップWebプログラミング
複数のWebサービスのAPIを組み合わせ，あたかもひとつのWebサービスのようにする機能のこと。
http://ja.wikipedia.org/wiki/マッシュアップ_(Webプログラミング)
ITの深い知識がなくても，既存のWebサービスを組み合わせて，短期間でアプリケーション開発ができることから，新しい開発技法として注目されている。
マッシュアップ4D
マッシュアップ4D
Webエリアを活用し，HTML/CSS/JavaScriptのAPIを組み合わせ， あたかもひとつのデスクトップアプリケーションのようにする開発技法。
マッシュアップ4D
Webエリアを活用し，HTML/CSS/JavaScriptのAPIを組み合わせ， あたかもひとつのデスクトップアプリケーションのようにする開発技法。
マッシュアップ4D
Webエリアを活用し，HTML/CSS/JavaScriptのAPIを組み合わせ， あたかもひとつのデスクトップアプリケーションのようにする開発技法。
マッシュアップ4D
Webエリアを活用し，HTML/CSS/JavaScriptのAPIを組み合わせ， あたかもひとつのデスクトップアプリケーションのようにする開発技法。
HTML5
HTML5
<canvas> <svg>
プログラミング言語 手続型 宣言型
API ローレベル ハイレベル
画像形式 ビットマップ ベクター（XML）
レンダリング サイズに比例 オブジェクト数に比例
オブジェクト操作 無理 容易
HTML5
<canvas> <svg>
プログラミング言語 手続型 宣言型
API ローレベル ハイレベル
画像形式 ビットマップ ベクター（XML）
レンダリング サイズに比例 オブジェクト数に比例
オブジェクト操作 無理 容易
HTML5
<canvas>
プログラミング言語 手続型
API ローレベル
画像形式 ビットマップ
レンダリング サイズに比例
オブジェクト操作 無理
<svg>
宣言型
ハイレベル
ベクター（XML）
オブジェクト数に比例
容易
HTML5
<canvas>
プログラミング言語 手続型
API ローレベル
画像形式 ビットマップ
レンダリング サイズに比例
オブジェクト操作 無理
<svg>
宣言型
ハイレベル
ベクター（XML）
オブジェクト数に比例
容易
JavaScript
HTML5
<canvas>
プログラミング言語 手続型
API ローレベル
画像形式 ビットマップ
レンダリング サイズに比例
オブジェクト操作 無理
<svg>
宣言型
ハイレベル
ベクター（XML）
オブジェクト数に比例
容易
JavaScript
高速!!
HTML5
<canvas>
プログラミング言語 手続型
API ローレベル
画像形式 ビットマップ
レンダリング サイズに比例
オブジェクト操作 無理
<svg>
宣言型
ハイレベル
ベクター（XML）
オブジェクト数に比例
容易
JavaScript
高速!!
JavaScript
JavaScript
Webブラウザで実行できるプログラミング言語
JavaScript
Webブラウザで実行できるプログラミング言語
JavaScript
Webブラウザで実行できるプログラミング言語
Webエリア
Webエリア
Webブラウザと同等の機能を有するフォームオブジェクト
Webエリア
Webブラウザと同等の機能を有するフォームオブジェクト
Webエリア
Webブラウザと同等の機能を有するフォームオブジェクト
Webエリア
Webブラウザと同等の機能を有するフォームオブジェクト
Internet Explorer 7 Safari 4
Webエリア
Webブラウザと同等の機能を有するフォームオブジェクト
Internet Explorer 7 Safari 4
Webエリア
Webブラウザと同等の機能を有するフォームオブジェクト
Internet Explorer 7 Safari 4 Internet
Explorer Safari
Webエリア
Webブラウザと同等の機能を有するフォームオブジェクト
Internet Explorer 7 Safari 4 Internet
Explorer Safari
Integrated WebKit
Webエリア
Webブラウザと同等の機能を有するフォームオブジェクト
Internet Explorer 7 Safari 4 Internet
Explorer Safari
Integrated WebKit
WA OPEN URL
WA Execute JavaScript
WA EXECUTE JAVASCRIPT FUNCTION
WA SET PAGE CONTENT
// HTMLを表示 // JavaScriptを実行
Webエリア
WebエリアWA OPEN URL
WA SET PAGE CONTENT
WebエリアWA OPEN URL
WA SET PAGE CONTENT
ページの場所をシステムパスまたはURLを指定
ページの内容をHTMLで指定
WebエリアWA OPEN URL
WA SET PAGE CONTENT
ページの場所をシステムパスまたはURLを指定
ページの内容をHTMLで指定
追加リソースを相対パスで指定できる
追加リソースを相対パスで指定できるのはMacのみ（ベースURL）
WebエリアWA OPEN URL
システムパスまたはURLを指定
WA SET PAGE CONTENTHTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL
WebエリアWA OPEN URL
システムパスまたはURLを指定
WA SET PAGE CONTENTHTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL
WebエリアWA OPEN URL
システムパスまたはURLを指定
WA SET PAGE CONTENTHTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL
WebエリアWA OPEN URL
システムパスをPOSIXパスに変換
WA SET PAGE CONTENTHTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
Convert path system to POSIX
WA SET PAGE CONTENTC:/MyFolder/My File.html
/MyFolder/My File.html
// POSIX
WebエリアWA OPEN URL
システムパスをPOSIXパスに変換してURLエスケープ
WA SET PAGE CONTENTHTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENTC:/MyFolder/My%20File.html
/MyFolder/My%20File.html
// ?
Convert path system to POSIX (...;*)
WebエリアWA OPEN URL
システムパスをURLに変換
WA SET PAGE CONTENTHTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENTfile:///C:/MyFolder/My%20File.html
file:////MyFolder/My%20File.html
// URL (Windows)
“file:///”+Convert path system to POSIX (...;*)
WebエリアWA OPEN URL
システムパスをURLに変換
WA SET PAGE CONTENTHTMLを指定
// システムパス
C:¥MyFolder¥My File.html
Macintosh HD:MyFolder:My File.html
WA SET PAGE CONTENTfile://C:/MyFolder/My%20File.html
file:///MyFolder/My%20File.html
// URL (Mac OS)
“file://”+Convert path system to POSIX (...;*)
WebエリアベースURL
*Mac Only
WebエリアベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
WebエリアベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></script><link rel=”stylesheet” href=”css/style.css” />
</head>
WebエリアベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></script><link rel=”stylesheet” href=”css/style.css” />
</head>
WebエリアベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></script><link rel=”stylesheet” href=”css/style.css” />
</head>
WA SET PAGE CONTENT (...;...;”file:///MyFolder/”)
WebエリアベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></script><link rel=”stylesheet” href=”css/style.css” />
</head>
WA SET PAGE CONTENT (...;...;”file:///MyFolder/”)
WebエリアベースURL
*Mac Only
WA SET PAGE CONTENTでも相対パスが指定できる
<head><base href=”file:///MyFolder/” /><script src=”js/jquery.js”></script><link rel=”stylesheet” href=”css/style.css” />
</head>
WA SET PAGE CONTENT (...;...;”file:///MyFolder/”)
Webエリアキャッシュ
Webエリアキャッシュ
Webエリアがロードしたファイルはキャッシュされることも・・・
Webエリアキャッシュ
Webエリアがロードしたファイルはキャッシュされることも・・・
WA SET PAGE CONTENTで渡したHTMLはキャッシュされない
WebエリアローカルHTMLファイル使用のポイント
WebエリアローカルHTMLファイル使用のポイント
● URL (file://)▲ システムパス
WebエリアローカルHTMLファイル使用のポイント
● URL (file://)▲ システムパス
● WA SET PAGE CONTENT▲ WA OPEN URL
WebエリアローカルHTMLファイル使用のポイント
● URL (file://)▲ システムパス
● WA SET PAGE CONTENT▲ WA OPEN URL
● 単一ファイル，絶対パス▲ 複数ファイル，<base>，相対パス
WebエリアローカルHTMLファイル使用のポイント
● URL (file://)▲ システムパス
● WA SET PAGE CONTENT▲ WA OPEN URL
● 単一ファイル，絶対パス▲ 複数ファイル，<base>，相対パス
プラットフォーム注意
WebエリアローカルHTMLファイル使用のポイント
● URL (file://)▲ システムパス
● WA SET PAGE CONTENT▲ WA OPEN URL
● 単一ファイル，絶対パス▲ 複数ファイル，<base>，相対パス
キャッシュ注意
プラットフォーム注意
WebエリアローカルHTMLファイル使用のポイント
● URL (file://)▲ システムパス
● WA SET PAGE CONTENT▲ WA OPEN URL
● 単一ファイル，絶対パス▲ 複数ファイル，<base>，相対パス
キャッシュ注意
プラットフォーム注意
プラットフォーム・キャッシュ注意
Webエリアドラッグ＆ドロップでページを移動しないために
Webエリアドラッグ＆ドロップでページを移動しないために
<body ondragover="return false;" ondrop="return false;">
</body>
Webエリアフォームイベント
Webエリアフォームイベント
On End URL Loading$filter{1}:="http://*"$access{1}:=FalseWA SET URL FILTERS (*;...;$filter;$access)
On LoadWA OPEN URL/WA SET PAGE CONTENTWA SET PREFERENCE (*;...;wa enable JavaScript;True)
Webエリアフォームイベント
On URL Filtering$url:=WA Get last filtered URL
On End URL Loading$filter{1}:="http://*"$access{1}:=FalseWA SET URL FILTERS (*;...;$filter;$access)
On LoadWA OPEN URL/WA SET PAGE CONTENTWA SET PREFERENCE (*;...;wa enable JavaScript;True)
Webエリアフォームイベント
On URL Filtering$url:=WA Get last filtered URL
Webエリアフォームイベント
On URL Filtering$url:=WA Get last filtered URL
Webエリアフォームイベント
function clearCanvas () { window.location = "http://clearCanvas/";}
On URL Filtering$url:=WA Get last filtered URL
Webエリアフォームイベント
function clearCanvas () { window.location = "http://clearCanvas/";}
Webエリアフォームイベント
On ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)
function clearCanvas () { window.location = "http://clearCanvas/";}
Webエリアフォームイベント
On ClickedWA EXECUTE JAVASCRIPT FUNCTION (...;”clearCanvas”;*;...)
function clearCanvas () { window.location = "http://clearCanvas/";}
On URL Filtering$url:=WA Get last filtered URL
Webエリア
ペイントツールCanvasRenderingContext2D
メソッド 説明arc() 曲線・円・弧beginPath() 線の始点を決めるclosePath() 現在位置から始点まで戻るfill() 線の内側を塗りつぶすlineTo() 指定位置まで線を延長するmoveTo() 指定位置まで移動するrect() 四角を描くstroke() 線を描く
canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;canvas.height = window.innerHeight;! !if (!canvas) {! alert('Error: canvas element not found!');! return;}
if (!canvas.getContext) {! alert('Error: no canvas.getContext!');! return;}
context = canvas.getContext('2d');
if (!context) {! alert('Error: failed to get context!');! return;}
var canvas;var tool;
canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;canvas.height = window.innerHeight;! !if (!canvas) {! alert('Error: canvas element not found!');! return;}
if (!canvas.getContext) {! alert('Error: no canvas.getContext!');! return;}
context = canvas.getContext('2d');
if (!context) {! alert('Error: failed to get context!');! return;}
var canvas;var tool;
CanvasRenderingContext2D
var canvas;var tool;
canvas = document.getElementById('myCanvas');
! canvas.width = window.innerWidth;! canvas.height = window.innerHeight;! !if (!canvas) {! ! alert('Error: canvas element not found!');! return;}
if (!canvas.getContext) {! ! alert('Error: no canvas.getContext!');! return;}
context = canvas.getContext('2d');
if (!context) {! ! alert('Error: failed to get context!');! return;}
<canvas id="myCanvas">no canvas support</canvas>
canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;canvas.height = window.innerHeight;! !if (!canvas) {! alert('Error: canvas element not found!');! return;}
if (!canvas.getContext) {! alert('Error: no canvas.getContext!');! return;}
context = canvas.getContext('2d');
if (!context) {! alert('Error: failed to get context!');! return;}
var canvas;var tool;
canvas = document.getElementById('myCanvas');
! canvas.width = window.innerWidth;! canvas.height = window.innerHeight;! !if (!canvas) {! ! alert('Error: canvas element not found!');! return;}
if (!canvas.getContext) {! ! alert('Error: no canvas.getContext!');! return;}
context = canvas.getContext('2d');
if (!context) {! ! alert('Error: failed to get context!');! return;}
<canvas id="myCanvas">no canvas support</canvas>
canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;canvas.height = window.innerHeight;! !if (!canvas) {! alert('Error: canvas element not found!');! return;}
if (!canvas.getContext) {! alert('Error: no canvas.getContext!');! return;}
context = canvas.getContext('2d');
if (!context) {! alert('Error: failed to get context!');! return;}
canvasサポートのチェック（×Windows v12，v13 + Internet Explorer 8）
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
var tempCanvas;var contextTemp;
var tempCanvas;var contextTemp;
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
function img_update () {! context.drawImage(tempCanvas, 0, 0);! contextTemp.clearRect(0, 0, tempCanvas.width, tempCanvas.height);}
var tempCanvas;var contextTemp;
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
function img_update () {! context.drawImage(tempCanvas, 0, 0);! contextTemp.clearRect(0, 0, tempCanvas.width, tempCanvas.height);}
一時コンテキストに描画した後に転写
var tempCanvas;var contextTemp;
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
function img_update () {! context.drawImage(tempCanvas, 0, 0);! contextTemp.clearRect(0, 0, tempCanvas.width, tempCanvas.height);}
一時コンテキストに描画した後に転写
ダイレクトの
描画した場合
，
やり直しが効
かない!!
（ビットマッ
プ画像）
var tempCanvas;var contextTemp;
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
<select id="dtool" style="visibility:hidden;">! <option value="line">Line</option>! <option value="rect">Rectangle</option>! <option value="pencil">Pencil</option>! <option value="circle">Circle</option>! <option value="eraser">Eraser</option>! <option value="rectFill">Solid Rectangle</option>! <option value="circleFill">Solid Circle</option></select>
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
var tempCanvas;var contextTemp;
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
<select id="dtool" style="visibility:hidden;">! <option value="line">Line</option>! <option value="rect">Rectangle</option>! <option value="pencil">Pencil</option>! <option value="circle">Circle</option>! <option value="eraser">Eraser</option>! <option value="rectFill">Solid Rectangle</option>! <option value="circleFill">Solid Circle</option></select>
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
イベントリスナーでツールを切り替え
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
var tool;var tools = {};
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
var tool;var tools = {};
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
var tool;var tools = {};
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
マウスイベント
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
var tool;var tools = {};
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
var tool;var tools = {};
! var tool_default = 'line';
! if (tools[tool_default]) {! ! tool = new tools[tool_default]();! ! tool_select.value = tool_default;! }
! tempCanvas.addEventListener('mousedown', ev_canvas, false);! tempCanvas.addEventListener('mousemove', ev_canvas, false);! tempCanvas.addEventListener('mouseup', ev_canvas, false););
! function ev_canvas (ev) {! ! if (ev.layerX || ev.layerX == 0) { // Firefox! ! ! ev._x = ev.layerX;! ! ! ev._y = ev.layerY;! ! } else if (ev.offsetX || ev.offsetX == 0) { // Opera! ! ! ev._x = ev.offsetX;! ! ! ev._y = ev.offsetY;! ! }
! ! var func = tool[ev.type];! ! if (func) {! ! ! func(ev);! ! }! }
canvas内の相対座標を ev._x, ev._y に格納（マウスイベント共通）
ペイントツールえんぴつ（フリーライン）
ペイントツールえんぴつ（フリーライン）
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
ペイントツールえんぴつ（フリーライン）
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
ペイントツールえんぴつ（フリーライン）
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
var tempCanvas;var contextTemp;
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
var container = canvas.parentNode;
tempCanvas = document.createElement('canvas');!if (!tempCanvas) {! alert('Error: cannot create a new canvas element!');! return;}
tempCanvas.id = 'myCanvasTemp';tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;container.appendChild(tempCanvas);
contextTemp = tempCanvas.getContext('2d');
var tool_select = document.getElementById('dtool');
if (!tool_select) {! alert('Error: failed to get the dtool element!');! return;}
tool_select.addEventListener('change', ev_tool_change, false);
<select id="dtool" style="visibility:hidden;">! <option value="line">Line</option>! <option value="rect">Rectangle</option>! <option value="pencil">Pencil</option>! <option value="circle">Circle</option>! <option value="eraser">Eraser</option>! <option value="rectFill">Solid Rectangle</option>! <option value="circleFill">Solid Circle</option></select>
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
イベントリスナーでツールを切り替え
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
‘pencil’
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
‘pencil’‘pencil’
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }} tools[‘pencil’]
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
‘pencil’‘pencil’
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
tools[‘pencil’]
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
tools[‘pencil’]
tools.pencil
ペイントツール
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
function fireEvent(element,event){! if (document.createEventObject){! // for IE! var evt = document.createEventObject();! return element.fireEvent('on'+event,evt);! }! else{! // for others! var evt = document.createEvent('HTMLEvents');! evt.initEvent(event, true, true); // bubbling,cancellable! return !element.dispatchEvent(evt);! }}
function ev_tool_change (ev) {! if (tools[this.value]) {! tool = new tools[this.value]();! }}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeDrawTool";*;”pencil”)
function changeDrawTool(drawTool) {! var obj = document.getElementById('dtool');! obj.value = drawTool;! drawingTool = drawTool;! fireEvent(obj,'change');}
tools.pencil = function () {! var tool = this;! this.started = false;
! this.mousedown = function (ev) {! ! contextTemp.beginPath();! ! contextTemp.moveTo(ev._x, ev._y);! ! tool.started = true;! ! saveImage();! };
! this.mousemove = function (ev) {! ! if (tool.started) {! ! ! contextTemp.lineTo(ev._x, ev._y);! ! ! contextTemp.stroke();! ! }! };
! this.mouseup = function (ev) {! ! if (tool.started) {! ! ! tool.mousemove(ev);! ! ! tool.started = false;! ! ! img_update();! ! }! };};
tools.pencil
ペイントツールライン色
intColor:=Select RGB color (intColor)$hexColor:=UTIL_IntToHex (intColor)WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeColor";*;$hexColor)
function changeColor(hexColor) {! var tempCanvas = document.getElementById('myCanvasTemp');! var tempContext = tempCanvas.getContext('2d');! color = hexColor;! tempContext.strokeStyle = hexColor;}
ペイントツールライン幅
function changeStrokeWidth(lWidth) {! var tempCanvas = document.getElementById('myCanvasTemp');! var tempContext = tempCanvas.getContext('2d');! strokeWidth = lWidth;! tempContext.lineWidth = lWidth;}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"changeStrokeWidth";*;size)
ペイントツール書き出し
function getData() {! var canvas = document.getElementById('myCanvas'); ! var strData = canvas.toDataURL('image/png');! return strData;}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"getData";image)TEXT TO BLOB (image;$image_blob)CREATE RECORD ([Images])[Images]image_name:=imageName[Images]image_data:=$image_blob SAVE RECORD ([Images])
ペイントツール読み込み
function loadImage(imageSource) {var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');var imageObject = new Image();imageObject.onload = function() {
context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(imageObject, 0, 0, canvas.width, canvas.height);
}; imageObject.src = imageSource;
}
WA EXECUTE JAVASCRIPT FUNCTION (*;"WA_Canvas";"loadImage";*;image)
ペイントツールリンク
ペイントツールリンク
http://muro.deviantart.com
http://www.mrdoob.com/projects/harmony/
http://muro.deviantart.com
ペイントツール
top related