お絵かき掲示板Art.netLABOメニュー

HTML5canvasでお絵描きツール「しぃペインターもどき」を作りたい!

第4回: [進む/戻る] (アンドゥとリドゥ)
青枠内がキャンバスで、マウスをドラッグすると線が描けます。

このキャンバスは、HTML 5 Canvas に対応したブラウザで使用できます。
Toolbar




4回目はアンケートでも需要の高かったツール「進む」と「戻る」を実装します!
(しぃペインター以外のお絵描きソフトで言うと「アンドゥ」と「リドゥ」です)

大変難航しましたが、どうにか動くようになりました(><;)
しかし途中でA値など(描画以外の動作)が混ざると、おかしな動きになります;;
そして、このサンプルには付いていませんが、レイヤーを実装するとこの方法では、どう考えても無理でした。
仕方ないので「進む/戻る」実装はあきらめて、他の作戦を考えた方が現実的な予感です(;_;)
現在公開できる情報的には、そんな感じです・・・とりあえず、「進む/戻る」のサンプルでした。
ちなみに進む戻るの回数は、制限する事が出来なったので、たぶん無限です。
工程数が増えてくると、PC環境によってはメモリを大食いするかもしれません。

こちらの外国語のサイトにあったアンドゥ/リドゥのサンプル? を参考にさせて頂きました(感謝!)
とはいえ、このサイトが日本語じゃない事は間違いないのですが、何語なのかも解らずページ翻訳してもチンプンカンプンで、コピペしても動かず・・・
試行錯誤すること100時間以上・・・結局このサイトで公開されているソースをベースにして、こちらのソースを1行づつ付け足しては動作確認の繰り返しでやっと形になりました。 なので前回までとジャバスクリプト部分の書き方がまったく違います。とりあえず動けばOK!(><)b

それと、マウスカーソル位置の取得方法も上の外国語のサイトにあった方法をお借りして改善!
前はブラウザをスクロールしたりキャンバス位置を動かすとおかしな所に線が描かさっていたのですが治りました。
マウスカーソル位置の取得方法を以下のように変更しました。

MY_OLDX = e.pageX - $(this).offset().left;
MY_OLDY = e.pageY - $(this).offset().top;

MY_OLDXとMY_OLDYは横と縦のマウスカーソル座標が入る変数です。
e.pageX(e.pageY)はマウスイベントの入った環境変数みたいな物だと思う(憶測)
$(this)は、キャンバスタグのようだ。(console.log(this);で調べた)
leftとtopはたぶんブラウザの左端と上からの余白みたいな意味かもしれない。
まぁ、そんな感じ。とりあえず動いたから理屈はどうでもいいです(^▽^)

HTML部分



<!DOCTYPE html>
<HTML lang="ja"><HEAD>

<style type="text/css">
<!--
/* ■このCSSは外部に置くと×■謎のCSS(farbtastic.css)で太さスライダーのcssが上書きされてしまう)■ */

/* ■ブラウザ固有の余白を消す(消さないとキャンバスが左上にピッタリ付かないので線がブレてしまう)■ */
*{ margin:0px; padding:0px;}
/* ■ページの背景色を白にする。キャンバスはマット色=黒の透明 + 鉛筆の色も黒なので、ページ色が黒系だと何も見えなくなる為。■ */
BODY { color:#000000; background-color:#ffffff; }

/* ■進む戻る等の上部メニューDIV(横幅はキャンバスと同じにする)■ */
.topmenu { 
position:absolute;left:185px; top:150px;
width:600px; height:35px;
 color:#ffffff; background-color:#8a6d6d;
 background-image:url(paintbbs_img/oekakicgi_topturuber.gif); background-repeat:repeat-x;
border-style:inset; border-color:#4f4f4f; border-width:1px;
	}
/* ■投稿/進む/戻るボタン■ */
INPUT.topbotan{ widht:30px; height:30px; margin-left:2px; color:#000000; background-color:#ffffff; }


/* ■キャンバスがあるDIV(ウィンドウ全体の左上が基準位置)■ */
DIV.canvaswaku { position:absolute; left:185px; top:188px; }

/* ■右ツールバー(パレットが入るDIV)(ウィンドウ全体の左上が基準位置)(左余白150+カンバス600+カンバスとツールバーの余白10=左から760位置)■ */
.turuberbox{
position:absolute; left:795px; top:150px;
width:70px; height:400px;
 color:#f8f5ef; background-color:#8a6d6d; font-size:80%;
 border-style:solid; border-color:#4b4b4b; border-width:1px;
}
/* ■(turuberbox内)パレット全体DIV■ */
.pale_colors{ 
 margin:0 auto 0 auto; width:64px; height:152px;
 border-style:solid; border-color:#dddddd; border-width:1px;
 }
/* ■(turuberbox/pale_colors内)パレット色単体LI(非選択)■ */
.pale_tan{
width:26px; height:18px; cursor:pointer; border-style:solid; border-color:#4b4b4b; border-width:1px;
vertical-align:middle; margin:1px; border-radius:2px; box-shadow:inset0 0 2px rgba(0,0,0,0.5);
}
/* ■(turuberbox内)カラーピッカー■ */
.colorpk { width:67px; height:67px; margin:0 auto 0 auto; }
/* ■選択中のパレット(JS側から使う書き換え用のCSS)■ */
.active_pareto{
width:26px; height:18px; cursor:pointer; border-style:solid; border-color:#ffffff; border-width:2px;
vertical-align:middle; margin:1px; border-radius:2px; box-shadow:inset0 0 2px rgba(0,0,0,0.5);
}
/* ■パレットの・を消す■ */
DL,UL,OL{ list-style-type:none;}
/* ■入力×のinputタグ■(turuberbox内)カラーピッカーの色見本が出るinputタグ■ */
.readonlyinput{ width:50px; color:#f8f5ef; background-color:#8a6d6d; font-size:70%; border-style:none; }

/* ■(turuberbox内)太さとA値のスライダー(右ツールバーturuberbox内)■ */
.peninituru{ padding-top:30px; width:67px; height:67px; margin:0 auto 0 auto; }
/* ■(turuberbox内)A値スライダー */
.slider_a{ width:60px; }
/* ■(turuberbox内)太さスライダー */
.slider_pen{ width:60px; height:32px; }

-->
</style>
</HEAD><BODY onload="s_paintbbs();">

	<div id="menu" class="topmenu"><!-- ■上部ツールバー -->
<input type="button" value="進む" class="topbotan" onclick="cRedo()">
<input type="button" value="戻る" class="topbotan" onclick="cUndo()">
	</div><!-- ■上部ツールバー -->


<div class="canvaswaku"><CANVAS id="ID_MYCANVAS1" width="600" height="400" class="aowaku">
<!-- ■canvas非対応ブラウザで表示されるメッセージ --> このキャンバスは、HTML 5 Canvas に対応したブラウザで使用できます。
</CANVAS></div>


<Div class="turuberbox"><!-- ■右ツールバー■悪霊退散■■悪霊退散■■悪霊退散■■悪霊退散■ -->
<span class="mini">Toolbar<br></span>
	<div id="colorPalet" class="pale_colors"><!-- ■colorPalet -->
<DIV STYLE=" float:left; width:32px;"><!-- ○パレット左右フロート -->
<ul>
<LI style=" background-color:#000000;" class="pale_tan" id="ID_irop1"></LI>
<LI style=" background-color:#b47575;" class="pale_tan" id="ID_irop2"></LI>
<LI style=" background-color:#fa9696;" class="pale_tan" id="ID_irop3"></LI>
<LI style=" background-color:#ffb6ff;" class="pale_tan" id="ID_irop4"></LI>
<LI style=" background-color:#25c7c9;" class="pale_tan" id="ID_irop5"></LI>
<LI style=" background-color:#e7962d;" class="pale_tan" id="ID_irop6"></LI>
<LI style=" background-color:#fcece2;" class="pale_tan" id="ID_irop7"></LI>
</ul>
</DIV><DIV style=" margin-left:32px;"><!-- ○パレット左右フロート -->
<ul>
<LI style=" background-color:#ffffff;" class="pale_tan" id="ID_irop8"></LI>
<LI style=" background-color:#888888;" class="pale_tan" id="ID_irop9"></LI>
<LI style=" background-color:#c096c0;" class="pale_tan" id="ID_irop10"></LI>
<LI style=" background-color:#8080ff;" class="pale_tan" id="ID_irop11"></LI>
<LI style=" background-color:#e7e58d;" class="pale_tan" id="ID_irop12"></LI>
<LI style=" background-color:#99cb7b;" class="pale_tan" id="ID_irop13"></LI>
<LI style=" background-color:#f9ddcf;" class="pale_tan" id="ID_irop14"></LI>
</ul>
</DIV><br style="clear:both;"><!-- ○パレット左右フロート -->
	</DIV><!-- ■colorPalet -->
<div id="colorpick" class="colorpk"><!-- ■カラーピッカー -->
<input type="text" id="color" name="color" value="#000000" readonly="readonly" class="readonlyinput"><br><!-- ←選択中の色見本 -->
<div id="colorpicker" onclick="sub_cpiroset()"></div><!-- ←カラーピッカー本体が入るDIV -->
</div><!-- ■カラーピッカー -->


<Div class="peninituru"><!-- ■スライダー -->
<!-- ■A値 -->
<input type="text" value="A値:100" id="slider2atai" readonly="readonly" class="readonlyinput"><br>
<div id="slider2" class="slider_a"></div>
<!-- ■太さ -->
<input type="text" value="太さ:1" id="slider1atai" readonly="readonly" class="readonlyinput"><br>
<div id="slider1" class="slider_pen"></div>
</Div><!-- ■スライダー -->

</Div><!-- ■■■右ツールバー■悪霊退散■■悪霊退散■■悪霊退散■■悪霊退散■ -->

</body></html>

ジャバスクリプト部分




<!-- ■モバイルでのズーム動作を制御■ -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<!-- ■jQuery -->
<script type="text/javascript" src="js/jQuery.js"></script>
<!-- ■カラーピッカー(http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/)■ -->
<script type="text/javascript" src="js_colorpicker/farbtastic.js"></script>
<link rel="stylesheet" href="js_colorpicker/farbtastic.css" type="text/css">

<!-- ■カラーコード変換用ライブラリ(http://mementoo.info/archives/1792)■ -->
<script type="text/javascript" src="js/rgbcolor.js"></script>
<!-- ■スライダー用CSS -->
<link rel="stylesheet" href="js/jquery-ui-1.7.2.custom.css" type="text/css" media="all">
<!-- ■スライダー用JS -->
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>


<!-- ■ペイントツール部分のジャバスクリプト -->
<script type="text/javascript">
<!-- 


// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// ■グローバル変数■グローバル変数■グローバル変数■グローバル変数■
//■選択中パレットID■初期値
var MY_SELECT_PARETOID = "ID_irop1";
//■デフォルトのペン太さ
var MY_BURASISIZE = 1;
//■デフォルトのα値 0.0(完全な透明)〜1.0(不透明)
var MY_ALPHASIZE = 1;
//■デフォルトのペン色 (rgba(0,0,0,1)でも○)
var MY_PENCOLOR = "#000000";
//■マウスボタンクリックフラグ(押=true/離=false)
var MY_DRAWFLAG = false;
//■描画始点座標
var MY_X=0;
var MY_Y=0;
//■描画終点座標
var MY_OLDX=0;
var MY_OLDY=0;
// ■アンドゥ用バックアップデータ記録処理に使う配列変数を初期化
var MYARRAY_UNDODATA = new Array();
//■工程数を初期化
var MY_KOUTEISU = -1;
//■キャンバス
var MY_CANVAS1;
var MY_CONTEXT1;
//■キャンバスサイズ
var MY_CANVASX;
var MY_CANVASY;
// ■グローバル変数■グローバル変数■グローバル変数■グローバル変数■




//■最初に実行される処理と、マウス動作に反応して実行される常駐監視処理みたいな物?
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■bodyタグのs_paintbbsで実行■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
function s_paintbbs()
	{//▼body自動実行▼body自動実行▼body自動実行▼body自動実行▼body自動実行▼body自動実行▼body自動実行▼body自動実行▼body自動実行▼

//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■キャンバスを取得
MY_CANVAS1 = document.getElementById('ID_MYCANVAS1');
MY_CONTEXT1 = MY_CANVAS1.getContext("2d");
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■キャンバスサイズを取得
MY_CANVASX = MY_CANVAS1.width;
MY_CANVASY = MY_CANVAS1.height;
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// ■カラーピッカーを表示
var MY_PICKER = $.farbtastic('#colorpicker');
MY_PICKER.linkTo($("#color"));
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

// ■右クリのブラウザ固有の処理をキャンセル■右クリックスポイト導入用(作りかけ)
MY_CANVAS1.addEventListener("contextmenu", function(e){ e.preventDefault(); }, false);
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

// ■パレットから選んだ色をペンに設定する($から始まるのはたぶんjQuery的な謎処理)
$('li').click(function()
	{//▼色変更▼色変更▼色変更▼色変更▼色変更▼色変更
// ■プラグインrgbcolor.jsで、パレットから取った色「MY_CLIC_COLOR」rgb(30,120,210)形式を、(#FFFFFF形式)に変換する
var MY_CLIC_COLOR = new RGBColor($(this).css('background-color'));
MY_PICKER.setColor(MY_CLIC_COLOR.toHex());
//■LIに選択中のCSS calss(active_pareto)を追加する■
$('li').removeClass('active_pareto');
$(this).addClass('active_pareto');
// ■パレットから選んだ色をペンにセットする
// ■引数?の”#color”は選択した色のカラーコードの代入先(連想配列?)
MY_PENCOLOR = MY_PICKER.color;
//■選択中パレットID変数を更新■要素thisからid属性名を調べる■クリックしたLIタグのIDを取得(何か特殊な変数thisにはクリックしたLIタグがまるごと入ってる)
MY_SELECT_PARETOID = this.getAttribute("ID");
	});//▲色変更▲色変更▲色変更▲色変更▲色変更▲色変更
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// ■ブラシサイズを変更するスライダー
$("#slider1").slider
	({//▼B1
//■スライダーを横向き(最小が左、最大が右)にするか、縦向き(最小が下、最大が上)にするかを指定します。 指定可能な値は、"horizontal", "vertical"です。
orientation: "vertical",
//■"min"または"max"を指定します。 "min"を指定すると最小値からのスライドになり、"max"を指定すると最大値からのスライドになります。
range: "min",
min: 1,		// ブラシの最小サイズ
max: 50,	// ブラシの最大サイズ
value: 1,	// 最初のブラシサイズ
//■太さスライダーの上に今の太さを表示する ■ブラシサイズを設定
slide : function(evt, ui){ $( "#slider1atai" ).val( "太さ:" + ui.value ); MY_BURASISIZE = ui.value; }
	});//▲B1
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// ■透明度を変更するスライダー
$('#slider2').slider
		({//▼α1
min: 1, 	 // ■最小(スライダーを左端まで動かした時のA値)
max: 100,	 // ■最大
value : 100,  // 初期値(不透明)
slide : function(evt, ui)
	{//▼α2
//■A値スライダーの上に今のA値を表示する
$( "#slider2atai" ).val( "A値:" + ui.value );
//■A値を変化させる
alpha = ui.value;
$('#alpha').val(alpha);
if(alpha == 100) { MY_ALPHASIZE = 1; }
else if(alpha <= 9) {MY_ALPHASIZE = '0.0' + alpha; }
else if(alpha >= 10) { MY_ALPHASIZE = '0.' + alpha; }
	}//▲α2
		});//▲α1
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// ■キャンバス(MY_CANVAS1)の上でマウスを移動するたびにサブルーチンのsub_oekaki(描画処理)が実行される
MY_CANVAS1.addEventListener("mousemove", sub_oekaki, true);
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// ■キャンバス(MY_CANVAS1)の上でマウスボタンを押した瞬間に実行
MY_CANVAS1.addEventListener("mousedown", function(e)
		{//▼マウスクリック▼マウスクリック
//■true=マウスクリックフラグを立てる=これでsub_oekaki内の処理が実行される■マウスボタンクリックフラグ(押=true/離=false)
MY_DRAWFLAG = true;
//■描画始点座標に今のマウスカーソル位置()をセット(thisはキャンバスタグからのオフセット値のようだ(たぶん))
//■仕組みは不明だがwこれでブラウザをスクロールさせてもキャンバス位置を変えても正常に描けるようになった!
MY_OLDX = e.pageX - $(this).offset().left;
MY_OLDY = e.pageY - $(this).offset().top;
//■カラーピッカーで選択した色をペンにセットする
MY_PENCOLOR = MY_PICKER.color;
	}, true);//▲マウスクリック▲マウスクリック
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// ■キャンバス(MY_CANVAS1)の上でマウスボタンを押して離した瞬間に実行(マウスボタン押したフラグtrueを離した状態falseに戻す。)
MY_CANVAS1.addEventListener("mouseup", function()
		{//▼マウスボタン離した瞬間に実行
//■マウスボタンクリックフラグ(押=true/離=false)
MY_DRAWFLAG = false;
// ■アンドゥ用データ記録
cPush();
		}, true);//▲マウスボタン離した瞬間に実行
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

//■ダミー画像をロード
sub_dummyimglado();
		}//▲body自動実行▲body自動実行▲body自動実行▲body自動実行▲body自動実行▲body自動実行▲body自動実行▲body自動実行▲body自動実行▲
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■




// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
//■ダミー画像をロード(1pxの白紙jpg)この処理が無いとなぜか[戻る/進む]が効かない(jpg以外は×)
function sub_dummyimglado() {//■ダミー背景画像のロード
//■imgタグを作る(このダミー画像はjpgじゃないと[戻る]が効かなくなる)
var MY_BACKGROUND_IMG = new Image();
MY_BACKGROUND_IMG.src = 'paintbbs_img/dummy.jpg';
//■画像ロード完了したら実行(頭の$はなんだか解らないがとりあえず必要みたい)
$(MY_BACKGROUND_IMG).load(function () { MY_CONTEXT1.drawImage(MY_BACKGROUND_IMG, 0, 0, MY_CANVASX, MY_CANVASY); });
		}//■ダミー背景画像のロード
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■




// ◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●
// ■描画処理(キャンバスの上でマウスが動く度に実行されるイベント)
function sub_oekaki(e)
	{//▼描画処理▼▼▼描画処理▼▼▼描画処理▼▼▼描画処理▼▼▼描画処理▼

//■ボタンが押されてなかったら(true以外なら)終了■マウスボタンクリックフラグ(押=true/離=false)true (真)と false (偽)
if ( MY_DRAWFLAG != true ) return;

//■マウス位置の始点(eはマウスイベントのデータが自動で入っている変数。内容はconsole.log(e);で見れる。)
MY_X = e.pageX - $(this).offset().left;
MY_Y = e.pageY - $(this).offset().top;

//■描画用オブジェクト(MY_CONTEXT1)を作る■getCotextメソッドで得た2DコンテキストのオブジェクトをMY_CONTEXTに格納
MY_CANVAS1 = document.getElementById("ID_MYCANVAS1");
MY_CONTEXT1 = MY_CANVAS1.getContext("2d");

//■描画色
MY_CONTEXT1.strokeStyle = MY_PENCOLOR;
//■ペン太さ
MY_CONTEXT1.lineWidth = MY_BURASISIZE;
//■透明度(0.0(完全な透明)〜1(不透明))
MY_CONTEXT1.globalAlpha = MY_ALPHASIZE;


//■筆跡の描き終わりに丸みをつける
MY_CONTEXT1.lineJoin= "round";
//■筆跡の描き終わりの丸み2(butt, round, square
MY_CONTEXT1.lineCap = "round";

//■線を描くと宣言
MY_CONTEXT1.beginPath();

//■描き始める場所を指定
MY_CONTEXT1.moveTo(MY_OLDX, MY_OLDY);
//■引きたい線の終点を指定 lineTo=直線/
MY_CONTEXT1.lineTo(MY_X, MY_Y);

//■出来た図形を線で描画する
MY_CONTEXT1.stroke();

//■描いた線を閉じる
MY_CONTEXT1.closePath();

//■マウス位置の始点を書き換える。
MY_OLDX = MY_X;
MY_OLDY = MY_Y;

//■座標テスト
console.log("■終点X="+MY_X+"■終点Y="+MY_Y+"◆始点X"+MY_OLDX+"◆始点Y="+MY_OLDY);

	}//▲描画処理▲▲▲描画処理▲▲▲描画処理▲▲▲描画処理▲▲▲描画処理▲
// ◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●






// ◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●
//■ピッカー色を選択中パレットに保存■カラーピッカーを動かしてボタンを離した時に実行
function sub_cpiroset()
		{//▼ピッカー色パレット保存▼ピッカー色パレット保存▼ピッカー色パレット保存
//■ピッカーを動かした時に色見本が出る<input id="color">から背景色を取得
//■(-が入るcssプロパティ(background-color等)は、そのままではエラーになるので-を消して次の文字だけ大文字にする)
var MY_TMP_SANPURU_RGBIRO = document.getElementById('color').style.backgroundColor;
//■プラグインrgbcolor.jsで、「MY_TMP_SANPURU_RGBIRO」rgb(30,120,210)形式を、(#FFFFFF形式)に変換する
var MY_TMP_IRO_OBUJEKUTO = new RGBColor(MY_TMP_SANPURU_RGBIRO);
MY_TMP_SANPURU_16IRO = MY_TMP_IRO_OBUJEKUTO.toHex();
//■ピッカーで選択した色に選択中パレットのCSS背景色を書き換える
document.getElementById(MY_SELECT_PARETOID).style.backgroundColor = MY_TMP_SANPURU_16IRO;
		}//▲ピッカー色パレット保存▲ピッカー色パレット保存▲ピッカー色パレット保存
// ◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●◆●●






// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// ■戻るデータ保存■■■戻るデータ保存■■■戻るデータ保存■■■戻るデータ保存■■■戻るデータ保存■■■戻るデータ保存■■
function cPush()
		{//▼戻るデータ保存▼戻るデータ保存▼戻るデータ保存▼戻るデータ保存▼戻るデータ保存▼戻るデータ保存
// ■工程数を1増やす
MY_KOUTEISU++;
//■もしも、工程数よりも、戻る配列の数が大きければ、戻る配列の保存数を工程数と同じにする
if ( MY_KOUTEISU < MYARRAY_UNDODATA.length ) { MYARRAY_UNDODATA.length = MY_KOUTEISU; }
//■base64エンコーディングされた今の画像データを取得する(アンドゥ用データ保存用)
var MY_TMP_UNDOSAVEDATA = document.getElementById('ID_MYCANVAS1').toDataURL();
//■配列の末尾に追加MY_TMP_UNDOSAVEDATA■配列の使い方(http://lab.sonicmoov.com/development/javascript-array/)
MYARRAY_UNDODATA.push(MY_TMP_UNDOSAVEDATA);

//■没■×動かない■保存数が100を超えたら古いの(配列の先頭)から1つ消す(今のアンドゥデータ数=MYARRAY_UNDODATA.length;)
//■没■if ( MYARRAY_UNDODATA.length > 100 ) { MYARRAY_UNDODATA.shift(); }
		}//▲戻るデータ保存▲戻るデータ保存▲戻るデータ保存▲戻るデータ保存▲戻るデータ保存▲戻るデータ保存▲戻るデータ保存
// ■戻るデータ保存■■■戻るデータ保存■■■戻るデータ保存■■■戻るデータ保存■■■戻るデータ保存■■■戻るデータ保存■■
// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

//■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■
//■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■
// ■[戻る]クリックで一手戻る
function cUndo()
		{// ▼UNDO▼UNDO▼UNDO▼UNDO▼UNDO▼UNDO▼UNDO▼UNDO▼UNDO▼UNDO
//■工程数が1以上ならアンドゥできる
if (MY_KOUTEISU > 0)
	{//▼工程数1以上▼工程数1以上
//■工程数-1
MY_KOUTEISU--;
//■一時的に画像(戻るデータ)を入れる変数を初期化
var MY_CANVAS_PIC = new Image();
//■変数MY_CANVAS_PIC(img画像タグ)のsrc要素にアンドゥデータ(配列MYARRAY_UNDODATAのMY_KOUTEISU個目)をセット
MY_CANVAS_PIC.src = MYARRAY_UNDODATA[MY_KOUTEISU];
//■没■配列の末尾(最新の戻るポイント)を取り出す【×なぜだか動かない】
//■没■var MY_UNDOPOINT = MYARRAY_UNDODATA.length;
//■没■MY_UNDOPOINT -= 2;
//■没■MY_CANVAS_PIC.src = MYARRAY_UNDODATA[MY_UNDOPOINT];
//■キャンバスにアンドゥ用データを描画
//■貼付ける画像の読込が完了していない状況で drawImage()メソッドが呼ばれた場合は何もせずに終了するので、読込完了を確認する必要があるらしい。
MY_CANVAS_PIC.onload = function () { MY_CONTEXT1.drawImage(MY_CANVAS_PIC, 0, 0); }
	}//▲工程数1以上▲工程数1以上
		}//▲UNDO▲UNDO▲UNDO▲UNDO▲UNDO▲UNDO▲UNDO▲UNDO▲UNDO▲UNDO
//■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■
//■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■■戻る■

// ■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■
// ■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■
// ■[進む]クリックで一手進む(戻るの逆処理)
function cRedo()
		{//▼REDO▼REDO▼REDO▼REDO▼REDO▼REDO▼REDO▼REDO▼REDO▼REDO
if (MY_KOUTEISU < MYARRAY_UNDODATA.length-1)
	{//▼進むOKなら実行▼進むOKなら実行
MY_KOUTEISU++;
var MY_CANVAS_PIC = new Image();
MY_CANVAS_PIC.src = MYARRAY_UNDODATA[MY_KOUTEISU];
MY_CANVAS_PIC.onload = function () { MY_CONTEXT1.drawImage(MY_CANVAS_PIC, 0, 0); }
    }//▲進むOKなら実行▲進むOKなら実行
		}//▲REDO▲REDO▲REDO▲REDO▲REDO▲REDO▲REDO▲REDO▲REDO▲REDO▲REDO
// ■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■
// ■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■進む■■



 -->
</script>




2015年06月30日



お絵かき掲示板Art.netLABOメニュー