「お絵描きキャンバス」新バージョン

Tool Box が機能の限界に達したので　新しいデザインに変更しました

Canvas MouseMove改 ExArrow

Image IN モードを改善しました

ファイルの「参照」で　パソコン内の画像ファイルの読み込みに対応しました。
これで、
編集中のファイルを保存して、改めて、作業を続けられるように、
今後、対応可能になります。


「矢印の追加」をクリックすると、テストモードなので、
いまのところ、３種類の矢印をキャンバスに乗っけられます。

幾何図形の描画に便利なように、格子ラインの描写も可能にしました

その他、操作性の向上を目指しました。

サンプルは ここ　↓
Canvas MouseMove改 ExArrow

http://theendoftakechan.web.fc2.com/JavaScript/mousemoveKaiExArrow.html

追記　：

これまでのバージョンは、どれも、ひとつの HTML ファイルにして公開しています。

CSS も JavaScript も、新しいコードが混ざり込むと、動作に不具合が発生してしまうので、
別の名前で、スクリプトコードを保存していくと、どれがどれやら、
わけわからんようになったため、過去のコードは、ページ内にすべて記述するようにしました。

つまり、ソースの表示で、全部丸見え状態なわけです。

ちなみに、
Canvas MouseMove 改 Ex は、74KB と、なっております。

ページ自体は、画像ファイルを使っていないため、軽いのです。

「お絵描きキャンバス」追加情報

Image IN モードを追加しました

「フリーライン」をクリックすると
表示が「Image IN」に変わって　左上に新しい窓がのっかります

「画像ファイルをここにドロップしてください」
と書いてあるので　そこに

デスクトップなどにある画像のファイルを　ドラッグ アンド ドロップ
しますと

背景などにある色の白い部分はすべて透明色にして　ページにコピーします

　たとえば　この矢印などをコピーして デスクトップ上に置き

　サンプル・ページに　ドロップしてみてください


組み込まれた画像アイテムは ドラッグで自由に移動できて
また　マウスで押すと　時計回りに回転します
マウスを動かしたり　ボタンを上げたりすると　回転は止まります

ダブルクリックで　キャンバスにコピーします
アイテムを残すかどうか聞かれますので
どっちかに決めてください

表示の「Image IN」をクリックすると　左上にできた新しい窓が閉じます
残されているアイテムがあろうがなかろうが　一方的に
アイテムを残すかどうか聞かれますので
また　どっちかを選択してください

以上の操作は　現在のところ Internet Explorer と
Google Chrome で 動作確認ができています

サンプルは ここ　↓
Canvas MouseMove改 Ex

http://theendoftakechan.web.fc2.com/JavaScript/mousemoveKaiEx.html

Canvas に JavaScript で 楕円を描く サイン・コサイン関数

ここはひとつ Excel の手法にヒントがあるに違いないと見込んで探し求めたところ

酒井恒[さかい・ひさし]／著『Excel でわかる数学の基礎 〔新版〕』

という本の（42～44ページに）「5.1 楕円曲線」とあり

　［引用開始］

　Excel で、a＝3, b＝2のときの楕円を描くには、次のように行います。
　まずＡ列に t を 0 から 6.3（約２π）まで 0.3 ごとに入れます。次に B2 セルに ＝3*SIN(A2) を、C2 セルに ＝2*COS(A2) の数式を入れます。

　そして B2 と C2 セルを同時に選択し、オートフィルで t＝6.3 まで計算させます。

　x と y のセル（つまりＢ列とＣ列）のみを選択してグラフを描けば、次のような曲線が得られます。

　［引用終了 ： 図は省略］

ということでした――

数値の意味は、次の通りです。

a＝3 は、長径。
b＝2 は、短径。
t は、ラジアン（ラジアン＝角度/180×π）。

　パソコンの関数には、角度をラジアンで指定するようになっているようです。
　πラジアンが、180 度になる模様です。
　２πラジアンが、360 度になるので、2 × 3.14 ＝ 6.28 で、約 6.3 ラジアンが、360 度というわけです。
　これを、0.3 ラジアンごとに計算するという手法なのですが、今回は、0.1 ラジアンごとに計算しました。
　360 ÷ 63 ≒ 5.7
　つまり、5.7 度ごとに角度をかえて軌跡をペンでなぞるわけです。

今回チャレンジしたのは、キャンバス上でマウスの左ボタンを押して描かれた
その始点と終点を対角線とする長方形内にぴったりと楕円を描くという JavaScript です。

var x_s = MouseDown の x 座標;
var y_s = MouseDown の y 座標;

var x_e = MouseUp の x 座標;
var y_e = MouseUp の y 座標;

var x_m = MouseMove している間の x 軸変化数;
var y_m = MouseMove している間の y 軸変化数;

x_m = x_e - x_s;
y_m = y_e - y_s;
mPen.beginPath();
mPen.lineWidth = 1;
mPen.strokeStyle = '#000';
mPen.moveTo(x_s + x_m/2 + Math.round(x_m/2*Math.sin(0)), y_s + y_m/2 + Math.round(y_m/2*Math.cos(0)));
for(var i=1;i<=63;i++){
mPen.lineTo(x_s + x_m/2 + Math.round(x_m/2*Math.sin(i/10)), y_s + y_m/2 + Math.round(y_m/2*Math.cos(i/10)));
}
mPen.stroke();

１.　位置変化情報を計算したら、角度 0 の位置にペンを移動させる
２.　1 から 63 まで計算された軌跡をペンでなぞる
３.　その軌跡をペンで描く

　たったの　実質３行で　完結です。

　上に書いた Script 部分は、線の太さと色以外は、すべてそのまんまコピペしたものです。
　結果は、いつものサイトで確認できます。

　「ツールボックス」を開いて「図形の種類」から選んでください。
　「幾何図形」ボタンに（x, y）の開始座標が出ます。
　その、「幾何図形」ボタンをクリックすると、「自由描線」モードに戻ります。

Canvas MouseMove改 Ex

http://theendoftakechan.web.fc2.com/JavaScript/mousemoveKaiEx.html

「お絵描きキャンバス」修正情報

近頃
Undo, Redo の正当な書式と思われる

リドゥ配列.push(アンドゥ配列.pop());

アンドゥ配列.push(リドゥ配列.pop());

を 発見しまして、処理手順を全面的に書き直したところ、

アンドゥ・リドゥ処理が大幅に軽くなりましたので、
アンドゥ最大回数を 30 回に増やしました、とさ。

この Array.メソッド については Java などの参考書が有効かと思います。

現状をただちに保存するボタンはつけてありませんが、
一度、UnDo ReDo を繰り返しますと、その画面は保存された状態になる仕組みです。

追加の機能として、直線・三角・四角・円の幾何学図形描画に、
ようやく対応できました。楕円は、研究中です。


あと、それと、ローカル（自分のパソコン）に保存されていない状態で、
「リセット」ボタンを押しますと、サーバーに再読み込みに行きますので、
オフラインの際には、

「全 消」ボタンで、よろしく願います。


Canvas MouseMove改 Ex
「お絵描きキャンバス」改 Ex

http://theendoftakechan.web.fc2.com/JavaScript/mousemoveKaiEx.html

「お絵描きキャンバス」改 Ex

改善点は　次の通りです

アンドゥ 及び リドゥ　に対応しました
Undo, Redo　（安藤, 梨藤）

テストモードで 10 回 可能にしてあります

キャンバスの画面を　イメージエリアに独立して表示させることで
現在の画像の保存が　容易になりました
Image ボタン

イメージを表示させたら　右クリックで 「画像の保存」です


Canvas : 動作環境

HTML5 + CSS3 + JavaScript + 最新のブラウザ

つまり、最近のパソコンならそのまま動作します
ページを表示させたあとは　オフライン

――インターネットにつながっていなくても――

一端ページを閉じてしまわない限りは　動作可能です

Windows8.1 タッチパネル搭載機 + Firefox

での　動作確認事項

「オフ・モード」のときに一度　指でクリックしてから

――　「オフ・モード」で　一度クリック動作を指で行う　――

―― 「オン・モード」になります ――

いったん指を離した後で　そのまますかさず
もう一度指で触れて　画面を指でなぞります

――　ダブルクリックの　二回目を　ドラッグする感じで　――

指で　自由にラインを描くことができます

線の色と太さは設定ボタンが小さいので　マウスでどうぞよろしく


Image 画面を表示させた場合に

―― この　ダブルクリックの 二回目を　ドラッグする感じで ――

 その位置を　指で動かすことができます

もちろん　マウスでは　普通にドラッグして　イメージ画像の位置が変えられます

「お絵描きキャンバス」改 Ex

http://theendoftakechan.web.fc2.com/JavaScript/mousemoveKaiEx.html



もう少し　スクリプトの整理ができたら　要望があればですが
ソースコードは公開可能です

前回のバージョン

「お絵描きキャンバス」改

今回こっちのページは、全コードを一つのページに入れ直したため、

――つまり　右クリック　⇒　ソースの表示で――

そちらのサンプルコードは、全部確認可能になっています。

「お絵描きキャンバス」改

「お絵描きキャンバス」の使える色を
RGB 256 × 256 × 256 色に改良しました

線の太さは、1～100 ピクセルで、選べます。

あと、指定した文字の描画にも対応しました。

フォントの種類も何種類か、設定してあります。
フォントサイズは、一応、100 ピクセルまでです。

インターネットエクスプローラなら、ページを開いて、
そのまますぐに、上下のカーソルキーを押すと、
左上にあるバーの色が変わり、それが設定色にもなります。


最新のブラウザでないと、キャンバスには対応していないようです。
動作条件は、次の仕様が動作するブラウザになります

HTML5 + CSS3 + JavaScript

「お絵描きキャンバス」改

Canvas MouseMove Kai

http://theendoftakechan.web.fc2.com/JavaScript/mousemoveKai.html

「お絵描きキャンバス」テストモード

先だって、HTML5 仕様の Canvas に JavaScript で線を引きながら、
「これからは、いままでのやり方では、通用しなくなるんだ」
と実感した次第ですが……。

あれこれの参考資料を、目を点にしながら通読していて、さらに、
「UTF-8」なるキーワードが、すっかり点と化した目に、しきりに飛び込んでまいりました。

現在利用させていただいているところのエディタを確認してみたところ、
「ああぁ……文字コードが対応していない」
というわけで、人気の「サクラエディタ」をダウンロードしてみました。
「ああぁ……どうやって使えばいいんだぁっ」

というわけで、ページ体裁の仕上がりまでは、今までのエディタで、
一応の恰好がなんとかかろうじてととのったところで、
「サクラエディタ」にバトンタッチして、あと、
「TeraPad」を併用する、というあたりの折衷策に行きあたりばったり。


そういうわけで、今後は新しい仕様に徐々に移行していくべく、
とりあえずようやっとこさ、サイト・マップを作りました。
ここまでのページを並べただけですが、それなりに、
HTML5 + CSS で、作成しました。

http://theendoftakechan.web.fc2.com/map.html


それと、Canvas を利用した「お絵描き」がそこそこ可能な感じがしましたので、
ここまでの、動作具合を、テスト・モードとして、アップロードしました。
先日、いきなりバグって、中止にしていたページの再公開版になりますが。
――
スクリプトは、読み込み部分と動作部分で、二ヵ所に分けて書いてありますが、
コードはこのページ内で、すべて完結しています。――

http://theendoftakechan.web.fc2.com/JavaScript/mousemove.html


下記のページからも、リンクしています。
これまでの自作「ユニコード入力支援」ページのリンク集になります。

http://theendoftakechan.web.fc2.com/reference.html

「半死半生の猫」

表題の「猫」の生い立ちについて

「シュレーディンガーの猫」の別名である「半死半生の猫」はどのように誕生したのか、を自分なりに調べてみました。


量子力学の成立過程にそれなりに深くかかわる問題で、これはさっぱり手に負えない猫だと途中で気づいたのですが、乗りかかったなんとやらで、一応なんとかかんとか、生まれたいきさつくらいは理解できたつもりです。

――が、消化不良の腹具合は否めません。

http://theendoftakechan.web.fc2.com/Schrodinger.html


おまけで、アインシュタインも悩んだとかいう情報のある、
図形の面積の問題を小学校レベルの算数で解けるように、
図入りで解説しておきました。
面白い問題なので、一度挑戦してみはいかがでしょうか。


気が向かれたなら、こちら――

http://theendoftakechan.web.fc2.com/paradox.html