ちょっとした工夫。ブラシ風入力にするだけでここまでスムーズな絵が描ける·HTML5 Canvas Brush Sketch MOONGIFT
HTML5 Canvas Brush Sketchはマウスの入力をブラシ風にして滑らかにドローできるソフトウェアです。 iPadやWebブラウザ上で絵を描く際に試してみたいのがHTML5 Canvas Brush Sketchです。単純にマウスを動かした線を引くのではなく、ブラシ風に描いてくれます。 こちらはライン版。普通にマウスの軌跡を描きます。 こちらはブラシ版。ぐっと良くなっています。 デモ動画です。 ちょっとした工夫と言えるかも知れませんが、目を塗りつぶしたりする際に効果を発揮しています。これなら失敗を気にせずさくさく描けそうです。 HTML5 Canvas Brush SketchはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る Skitchというアプリケーションがあります。今は
Canvasを使ったオンラインイラストソフトウェア·RoCanvas MOONGIFT
RoCanvasはHTML5/JavaScriptで作られたCanvas上で自由にイラストを描けるソフトウェアです。 RoCanvasはHTML5で作られたドローソフトウェアです。簡単なイラストを描いて、みんなで共有したりするのにぴったりと言えそうです。 最初の画面です。色、サイズ、書き方を選択できます。 赤の自由線です。 四角を書いてみました。中を全て塗りつぶしたもの、枠線だけの二つが選べます。 色を変えることもできます。 保存しておくことができます。サーバに画像データがポストされるとのことです。RoCanvas自体にはサーバサイドの仕組みは実装されていません。 RoCanvasは色やサイズ、線または四角から選んで自由にCanvas上に絵を描けます。その結果はサーバ上に保存されるので共有するのにも使えるでしょう。 RoCanvasはHTML5/JavaScript製のオープンソース・ソフ
FileSaver.js demo
The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C saveAs() FileSaver interface, without contacting any servers. Saving an image Saving text <form id="text-options"> <label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label> <input type="submit" value="Save"/> </for
クライアントサイドだけでファイルを保存する·FileSaver.js MOONGIFT
FileSaver.jsはクライアントサイドでデータを生成しダウンロードするJavaScriptライブラリです。 Webアプリケーションが増える中、Webブラウザ上で作ったコンテンツをそのままエクスポートする時に使えるライブラリがFileSaver.jsです。 まず画像を保存するデモです。 こんな感じに適当にマウスで文字を書きます。 ファイル名をつけて保存ボタンを押すと保存が実行されます（ウィンドウ下部にダウンロードファイルがあります）。 ダウンロードされたファイルです。内容が動的に生成されているのが分かります。 同様にテキストの保存もできます。 テキストファイルの内容も動的です。UTF-8で作成されます。 HTMLファイルの保存もできます。 FileSaver.jsはコンテンツをCanvasタグにレンダリングし、それをダウンロードしているようです。HTML5対応ブラウザに限定されますが、
ローソクチャートや棒、折れ線グラフを作るHTML5グラフライブラリ·Rocketchart MOONGIFT
RocketchartはHTML5で作られたダイナミックなグラフライブラリです。 HTML5でできることがどんどん広がっています。今回紹介するRocketchartsもHTML5を駆使しています。そしてすごいグラフを作ってきました。 ローソクチャートです。HTML5で作られています。 折れ線グラフを追加しました。 さらに棒グラフと折れ線グラフのミックスです。 クリックするとその箇所の数値が分かります。 表示範囲をマウスで選択して絞り込むこともできます。 逆に広げた場合です。 RocketchartはJSONデータを使ってCanvasタグにグラフを描いています。そのため直接書き出すのはもちろん、AjaxなどでJSONデータを渡してレンダリングすることもできそうです。 RocketchartはJavaScript製、GPL v3のオープンソース・ソフトウェアになります。 MOONGIFTはこう
How To Optimize Images With HTML5 Canvas — Smashing Magazine
If you really care about your visitors, then read this post in which Sergey Chikuyonok demonstrates how to optimize images with HTML5 Canvas. Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - method-inc/ghostwriter: html5, css3, javascript illustration app (use "simple" branch!)