ブラウザ上でお絵描きのできる canvas 要素をjQuery で操作してみた。
まず、jQuery をインクルードした白紙のページを Google Chrome で開き、Shift + Ctrl + J で JavaScript コンソールを表示する。別のウインドウに表示されてしまったら、左下隅の四角形のアイコンをクリックすると同じWindowに表示させることができる。 最初にキャンバス要素を作成する。 $('body').append('<canvas id="sample" width=300 height=150></canvas>'); 次に canvas の2Dコンテキストオブジェクトを作る。 c=$('canvas')[0].getContext('2d'); なぜ $('canvas')[0] なのだろうと思うかもしれないが、$('canvas') で検索できるDOM要素は複数あるはずだからその中の一つを指定する必要がある。この時 [0] で取り出せるのは jQuery オブジェクトではなくDOM要素なので注意が必要。この例では、getContext がDOM要素のメソッドなので帰って好都合なのだ。jQuery オブジェクトから裸のDOM要素を取り出すメソッドは他に .get() がある。get を使うと上の式は、$('canvas:first-child').get(0).getContext('2d') になる。.get(0) となっているが、.get() ではオブジェクトの配列が得られるため .getContext('2d') に対し TypeError になる。.get(0) なら、オブジェクトの配列の最初の要素が得られる。 2Dコンテキストオブジェクト c に、三角形のパスを定義する。 c.beginPath(); c.moveTo(150,20); c.lineTo(250, 130); c.lineTo(50, 130); c.closePath(); 定義したパスを描画する。 c.stroke(); 塗りつぶしてみる。 c.fill(); 赤で塗りつぶしてみる。 c.fillStyle = 'red'; c.fill(); 何となく canvas の使い方が分かった気になった。 お絵描きパッドの jQuery プラグインもある。jQuery のプラグインページの DrawBox の "Try out a demonstration" をクリックするとデモを使ってみることができる。
by tnomura9
| 2011-01-03 07:54
| JavaScript
|
Comments(6)
Commented
by
neniu
at 2012-09-11 15:12
x
$('canvas:first-child').get().getContext('2d') だと,get() が配列を返すのでうまくいかないと思います。
$('canvas:first-child').get(0).getContext('2d') とか $('canvas').get(0).getContext('2d') ではないでしょうか。
0
Commented
by
tnomura9 at 2012-09-11 21:34
neniu さん、コメントありがとうございました。ご指摘のとおり get() ではTypeError になりました。get(0) で動作しました。本文を訂正します。ありがとうございました。
Commented
by
kagomeme
at 2015-06-18 13:22
$(".myCanvas").each(function(){
var ctx=$(this).getContext("2d")... ↑このように .each() で実行できれば簡単なんですが・・・
Commented
by
tnomura9 at 2015-06-19 00:42
kagomeme さんコメントありがとうございました。
最近 jQuery を全く触っていないので、jQuery のオブジェクトと DOM 要素の関係などが全く思いつかなくなっています。きちんとお返事できるようになるには時間がかかりそうです。申し訳ありません。
Commented
by
Guest
at 2021-09-07 15:34
x
kagomeme さん、HTML DOMオブジェクトは、jQueryオブジェクトの[0]に格納されているそうです。
$(".myCanvas").each(function(){ var ctx=$(this)[0].getContext("2d")...
Commented
by
tnomura9 at 2021-09-07 17:42
|
カテゴリ
新型コロナウイルス 主インデックス Haskell 記事リスト 圏論記事リスト 考えるということのリスト 考えるということ ラッセルのパラドックス Haskell Prelude Ocaml ボーカロイド 圏論 jQuery デモ HTML Python ツールボックス XAMPP Ruby ubuntu WordPress 脳の話 話のネタ リンク 幸福論 キリスト教 心の話 メモ 電子カルテ Dojo JavaScript C# NetWalker ed と sed HTML Raspberry Pi C 言語 命題論理 以前の記事
最新のトラックバック
最新のコメント
ファン
記事ランキング
ブログジャンル
画像一覧
|
ファン申請 |
||