Yamada Program: CanvasとjQueryを使って図形をドラッグ
2011/09/24 CanvasとjQueryを使って図形をドラッグ 現在、HTMLやらJavaSvriptやらを勉強中。 HTML5の「Canvas」と「jQuery」と「jQuery UI」を使って、図形をドラッグする処理を実装してみました。 jQueryはバージョン1.6.4を使用。 jQuery UIはバージョン1.8を使用。 サンプルの概要 「四角」をクリックすると、四角形が追加される。 「楕円」をクリックすると、楕円形が追加される。 テキストボックスにテキストを入力すれば、図形の中にそのテキストが描画される。 追加された要素はドラッグして移動できる。 ドラッグして移動できるのはグレーのエリア内のみ。 ※HTML5に対応するブラウザでないと動作しません。 ※iOSのSafari及びAndroid標準ブラウザでは、描画は出来ますがドラッグ操作ができません。 （And
先日、ふと小粋空間さんを覗いてみたら「HTML5のcanvasを使ったお絵かきツール詳説」という記事がありました。HTML5もjQueryもよく知らないのですが、「お絵かき」と聞いては素通り出来ません～（笑。さっそく落書きさせてもらいました。 これ、面白い～！！ ブラウザだけで描けるってすごい。でも遊んでたら不満が色々と。もっとたくさん色が欲しい。線の太さも変えたい。で、小粋空間さんのJavaScriptをお借りして自分でも作ってみました。 ■色を増やす これは簡単です。<li>の部分を好きなっっっだけ増やせばいいだけ。 ■線の太さを変える ASCII.jpの「HTML5とjQueryでブラウザーがペイントツールに！」を参考にjQuery UIからjquery-ui-1.8.17.custom.zipをダウンロード。解凍するとファイルがいっぱい入ってますが、ここで使うのはjquery-ui
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
