FUNCTION LIMITED. Get the best experience with Internet Explorer 10. Beauty of the Web for Upgrading to Internet Explorer. JavaScript is …
theshodo - Bing
FUNCTION LIMITED. Get the best experience with Internet Explorer 10. Beauty of the Web for Upgrading to Internet Explorer. JavaScript is …
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
キーボードから入力した文字をcanvasに描画する - jsdo.it - Share JavaScript, HTML5 and CSS
// // Utilities // // 本題ではないので読み飛ばしてOKです. // /** * 引数に渡した値を文字列にして返します. */ function tostring(obj) { if (typeof obj == 'undefined') { return '<undefined>'; } else if (typeof obj == 'null') { return '<null>'; } else if (typeof obj == 'object') { var text = ""; for (var name in obj) { if (text != "") { text += ", "; } else { text += "{"; } text += name + ":" + tostring(obj[name]); } text = text + "}";
forked: キーボードから入力した文字をcanvasに描画する - jsdo.it - Share JavaScript, HTML5 and CSS
元のいい所がほとんど残っていないっす。。 キーボードから入力した文字をキャンバスへ追加ドラッグ＆ドロップと角度をつけられるようにしました。 // forked from mumoshu's "キーボードから入力した文字をcanvasに描画する" http://jsdo.it/mumoshu/n318 var currentTarget = 0;//角度を入力するべきターゲット var font = "20pt Arial"; var objArr = [];//文字情報保存のarr /** * 引数に渡した値を文字列にして返します. */ function tostring(obj) { if (typeof obj == 'undefined') { return '<undefined>'; } else if (typeof obj == 'null') { return '<nul
キーボードから入力した文字をcanvasに描画する - mumoshu.log
http://jsdo.it/mumoshu/n318 こんなものを作ったので、html5のcanvasにjavascriptでテキストを描画するにあたって役にたった情報をまとめておきます。 canvas.getContext(name)で取得できるContextの一覧CanvasContexts - WHATWG Wiki 2dcontextの仕様 getContext('2d')で取得できるcontextの仕様. http://dev.w3.org/html5/2dcontext/ 2dcontextのtext描画まわりの仕様 http://dev.w3.org/html5/2dcontext/#text 文字種、文字サイズの設定や、描画の方法まで全てのってる。 jQueryで押下されたキーを識別する .keypress() | jQuery API Documentation key
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
Canvas上で文字列をアニメーションさせてみる - Qiita
function reloadMessages(callback) { $.get('/messages.json', {}, function(res) { var messages = []; $(res).each(function(idx, item) { var pt = randomPoint(); messages.push({ content: item.content, color: randomColor(), delta: randomNumber(1,30), direction: 1, position: pt }); }); callback(messages); }); }
スクラッチ宝くじのような削ると見えてくるjQueryプラグイン「wScratchPad」を使うと面白いコンテンツが作れそうw - Chrome Life
jQueryのプラグインを使えば、画像に様々な効果を加えたり、アニメーションさせて表示させたりいろんなことができます。 そんなプラグインは出揃った感がありますが、今回とてもユニークなプラグインを見つけたのでご紹介したいと思います。 「銀はがし」ができるプラグイン！ 銀はがしといえば、皆さんご存知の宝くじなどでよくあるスクラッチカードがありますが、これと同じようなことをjQueryでできるようにしてくれるプラグイン「wScratchPad」です。 「wScratchPad」を使えば、画像をマスクした状態で表示しておき、マウスで削っていくと徐々に中の画像を見せるようなことができます。 簡単にスクラッチカードを削る間隔を味わうことができますよw デモページにアクセスすると試すことができます。 最初はマスクされて画像が何も表示されていません。 マウスで削っていくと隠れている画像が見えてきます。 用
Canvas 描画内容を薄く消す - jsdo.it - Share JavaScript, HTML5 and CSS
// forked from akm2's "Canvas clearArc()" http://jsdo.it/akm2/e8CK CanvasRenderingContext2D.prototype.clear = function() { this.save(); this.globalCompositeOperation = 'destination-out'; this.fillStyle = 'black'; this.fill(); this.restore(); }; CanvasRenderingContext2D.prototype.clearArc = function(x, y, radius, startAngle, endAngle, anticlockwise) { this.beginPath(); this.arc(x, y, radius, startA
canvasでキラキラした背景を作る方法 - KAYAC engineers' blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
canvas のタイポグラフィ効果 - HTML5 Rocks
Typographic effects in canvas Stay organized with collections Save and categorize content based on your preferences. My Background <canvas> entered my awareness in 2006 when Firefox v2.0 was released. An article on Ajaxian, describing the transformation matrix, inspired me to create my first <canvas> web-app; Color Sphere (2007). Which immersed me into the world of colors, and graphic primitives;
JSONで管理するHTML5音楽プレイヤーを作ってみた (1/4)
HTML5サウンドプレイヤーのサンプル。マウスで選択した曲（音声ファイル）を再生し、ラインアートを表示する。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5 Audioを使ってブラウザー上で動くサウンドプレイヤーを作る記事の続き。前回は、再生リストから選択した音楽（音声ファイル）を再生する基本機能を作りました。このままでも十分と言えば十分ですが、今回はビジュアルエフェクトと操作ボタンを追加して、より充実した機能のプレイヤーに仕上げていきます。 ビジュアルエフェクトを追加する まずビジュアルエフェクトを追加します。今回は、サウンドプレイヤーの背景いっぱいにcanvas要素を配置し、canvas上にランダムな色の線を描画していくラインアートのプログラムを用意しました。 HTML5 Canvasの基本的な使い方については本連
Literally Canvas — Literally Canvas v0.5.2 docs - HTML5 drawing board - MS Paint in your web browser
Note Looking for a multiuser whiteboard, or want some help building a drawing-based web app? Check out Browserboard. Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget. Its only dependency is React.js. You can use it to embed drawing boards in web pages. It’s kind of like an extensible MS Paint in JavaScript. Users can sketch drawings and you can do what you like w
WingMemo: HTML5でお絵かきツールを作ってみた
先日、ふと小粋空間さんを覗いてみたら「HTML5のcanvasを使ったお絵かきツール詳説」という記事がありました。HTML5もjQueryもよく知らないのですが、「お絵かき」と聞いては素通り出来ません～（笑。さっそく落書きさせてもらいました。 これ、面白い～！！ ブラウザだけで描けるってすごい。でも遊んでたら不満が色々と。もっとたくさん色が欲しい。線の太さも変えたい。で、小粋空間さんのJavaScriptをお借りして自分でも作ってみました。 ■色を増やす これは簡単です。<li>の部分を好きなっっっだけ増やせばいいだけ。 ■線の太さを変える ASCII.jpの「HTML5とjQueryでブラウザーがペイントツールに！」を参考にjQuery UIからjquery-ui-1.8.17.custom.zipをダウンロード。解凍するとファイルがいっぱい入ってますが、ここで使うのはjquery-ui
ASCII.jp：HTML5のCanvasで作る、Flash不要のお絵かきツール｜古籏一浩のJavaScriptラボ
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
HTML5のcanvasを使ったお絵かきツール詳説
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ページを開く
オープンソースのHTML5お絵かきウィジェット「Literally Canvas」:phpspot開発日誌