HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
jCanvas – jQueryのパワーでCanvasをもっと使いやすく
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で新しく追加された機能の一つにCanvasがあります。グラフィックスを描いたり、画像などのバイナリを描画したりすることもできるので使えそうな場面は多いと思うのですが、勝手が違ってなかなか手を出しづらいのが実情です。 そこでJavaScriptがjQueryで圧倒的に使いやすくなったように、CanvasについてもjCanvasを使えばもっと手軽に使えるようになりそうです。 jCanvasの使い方 例えば円を描くコードは次のように書きます。 // Draw a circle $("canvas").drawArc({ draggable: true, fillStyle: "green", x: 100, y: 100, radius: 50 }); ぱっと見で分かりやすいで
HTML5 ドラッグ&ドロップでファイルをアップロード
--- プログラム修正しました (2014/03/30) ご報告ありがとうございました --- HTML5 のドラッグ＆ドロップ API と jQuery.ajax() を使って、 ブラウザ上にドラッグ＆ドロップしたファイルをサーバへアップロードする方法です。 ソースは GitHub へ上げました。 https://github.com/yokano/dnd_file_upload 以下の流れで実現出来ます。 dropzone にファイルがドロップされる drop イベントが発生する イベントオブジェクトの dataTransfer からファイルを取得する FormData を作成してファイルを追加する Ajax でファイルを送信する <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ドラッグ＆ドロップでファイルアップ
Node.jsとHTML5で初音ミクのオンラインかるたゲーム「ミクミクかるた」を作ってみた - Qiita
初音ミクのオンラインかるたゲーム「ミクミクかるた」をリリースしました。 http://mikumikuplay.com/karuta/ 紹介動画URL 「ミクミクかるた」はブラウザで簡単に遊べるオンラインかるたゲームです。ゲームのルールは簡単で、ボカロ曲が流れたら、歌詞の先頭文字の札をクリックするだけです。「みっくみ～くにし～てあげる♪」と流れたら「み」の札を取ります。かるたの札の読み上げの代わりにボカロ曲が流れるというシステムです。オンライン対戦することも出来ます。 利用技術 クライアント HTML5, JQuery, jquery.vgrid.js, Bootstrap サーバー Node.js(socket.io, express) リバースプロキシ nginx 詳細は、http://mikumikuplay.com/karuta/page_thanks に書いてます。 これらの技術
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
