Canvasによるお絵描きスクリプトの使い方がわからない。

下記のスクリプトを使ってCanvasにマウスとタッチ両方でお絵描きできるようにしたいのですが、このスクリプトをどう使えばよいのかわからず、自作のHTMLに埋め込んだcanvasで動作してくれません。

http://studio-key.com/1007.html

とりあえず、var Canvas = document.getElementById(selecter);のselecterのところだけは、自作のHTMLに埋め込んだcanvasタグのIDに合わせて、'test'としてみたのですが…。

「とりあえずサンプル」にあるような、豊富な機能は必要なく、最低限、黒い線が描ければ、それで十分なのですが…。

どなたか、このスクリプトをどう設置すれば動作するのか、教えていただけないでしょうか？よろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2017/06/06 11:30

こんにちは

基本的には、id等を正しく書き換えれば動作するはずですが、実際にどのような設置をなさっているのかわからないので、何とも言えません。
手っ取り早い方法としては、例示サイトのサンプルをそのまま設置して動作を確認した上で、それを元にして修正して行くのが簡単だと思います。

注意点としては、
・サンプルでは、3つのjsファイルを読み込んでいますので、それぞれを正しく設置しておく必要があります。（jquery、DrawCanvas、rgbaの3種類）

＞とりあえず、var Canvas = document.getElementById(selecter);のselecter
＞のところだけは、自作のHTMLに埋め込んだcanvasタグのIDに合わせて、
＞'test'としてみたのですが…。
・サンプルではmyPaintメソッドをjQueryの拡張メソッドとして設定していますが、idを変えたいだけであれば、ご提示の方法は適切な変更方法とは思えません。
（正しく修正すれば、その方法でも動作しないことはないはずですが…）
HTMLソースの最後の方にある、scriptタグ内のスクリプト（=myPaintの設定部分）でセレクタの内容を設定するようになっていますので、そこで指定するのが製作者さんの意図に沿った方法だと思います。

この回答へのお礼

手っ取り早い方法としてオススメいただいた手順で進めたところ、一応、希望していたかたちにはできました。きちんと理解しておきたいので、追々、しっかり読み解いて、最終的には自分で書けるようにしたいと思います。ありがとうございました。

お礼日時：2017/06/06 17:22