下記のスクリプトを使ってCanvasにマウスとタッチ両方でお絵描きできるようにしたいのですが、このスクリプトをどう使えばよいのかわからず、自作のHTMLに埋め込んだcanvasで動作してくれません。
http://studio-key.com/1007.html
とりあえず、var Canvas = document.getElementById(selecter);のselecterのところだけは、自作のHTMLに埋め込んだcanvasタグのIDに合わせて、'test'としてみたのですが…。
「とりあえずサンプル」にあるような、豊富な機能は必要なく、最低限、黒い線が描ければ、それで十分なのですが…。
どなたか、このスクリプトをどう設置すれば動作するのか、教えていただけないでしょうか?よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは
基本的には、id等を正しく書き換えれば動作するはずですが、実際にどのような設置をなさっているのかわからないので、何とも言えません。
手っ取り早い方法としては、例示サイトのサンプルをそのまま設置して動作を確認した上で、それを元にして修正して行くのが簡単だと思います。
注意点としては、
・サンプルでは、3つのjsファイルを読み込んでいますので、それぞれを正しく設置しておく必要があります。(jquery、DrawCanvas、rgbaの3種類)
>とりあえず、var Canvas = document.getElementById(selecter);のselecter
>のところだけは、自作のHTMLに埋め込んだcanvasタグのIDに合わせて、
>'test'としてみたのですが…。
・サンプルではmyPaintメソッドをjQueryの拡張メソッドとして設定していますが、idを変えたいだけであれば、ご提示の方法は適切な変更方法とは思えません。
(正しく修正すれば、その方法でも動作しないことはないはずですが…)
HTMLソースの最後の方にある、scriptタグ内のスクリプト(=myPaintの設定部分)でセレクタの内容を設定するようになっていますので、そこで指定するのが製作者さんの意図に沿った方法だと思います。
手っ取り早い方法としてオススメいただいた手順で進めたところ、一応、希望していたかたちにはできました。きちんと理解しておきたいので、追々、しっかり読み解いて、最終的には自分で書けるようにしたいと思います。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- JavaScript 変数のスコープの問題? 3 2022/06/23 09:32
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- UNIX・Linux redmineにメールを飛ばす方法 1 2022/09/13 22:02
- Excel(エクセル) VBA : スクレイピングできない 4 2023/05/12 22:26
- シューズ・ブーツ コンバースオールスターの「CANVAS ALL STAR J HI」と「CANVAS ALL STA 2 2022/12/30 17:22
- ホームページ作成・プログラミング ホームページビルダー11で作ったHPにYoutube動画を埋め込みたい 3 2022/12/10 10:45
- 美術・アート トレパク疑惑をかけられにくくするには ここ最近いわゆるトレパク警察のいいがかりがが厳しくなったようで 1 2023/08/21 09:59
- 美術・アート 作曲って結局は感覚で勝負なんでしょうか? 絵と比べて音楽は感覚で左右されるように感じます。 私は絵を 4 2022/10/30 22:15
- JavaScript イラストレーター、縦中横のショートカットをスクリプトを使って作成する方法 1 2023/04/19 11:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div>のタッチ状態を維持したま...
-
フォームが空欄の時にフォーム...
-
プラグイン無しでContactform7...
-
変数名をどのようにつけるのが...
-
階層別の組織図の自動作成について
-
条件に該当した時のみ定数を宣...
-
2段階プルダウンで1段階目の選...
-
読み込んだQRコードをフォーム...
-
初心者です。gulpでコンパイル...
-
正規表現について質問です。条...
-
jQueryでシンセサイザーを作っ...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
二次元配列の中の各行の要素を...
-
出発駅A、到着駅Bを選択すると...
-
スマホ上で、左右スワイプで次...
-
【Google Apps Script】「ライ...
-
jQueryで同じクラス名のものを...
-
①入力フォーム→②確認表示画面→③...
-
プログラムについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
web制作・小窓リンクの技
-
d3.jsを使っての折れ線グラフと...
-
検索結果の並び替え
-
JavaScriptで、表を絞り込み&ソ...
-
jQueryのドラッグ&ドロップとD...
-
JavaScriptでwebAPIを呼び出す方法
-
静止写真を『じわっと』でる感じに
-
「光の三原色」みたいな「三つ...
-
altやtitleタグの表示のような...
-
ポップアップメニューがフォー...
-
ホームページビルダーを使って...
-
エクスプローラー風のメニュー
-
このようなメニューはどのよう...
-
amazonの商品画像拡大のようなj...
-
リンク先をマウスが移動すると...
-
ページ全体の拡大/縮小が行え...
-
【JavaScrip】メニューボタンに...
-
画像のポップアップ
-
リンク以外の箇所をクリックし...
-
数枚のバナーが一定の間隔でス...
おすすめ情報