[html5]canvasタグで月の満ち欠けを書いてみる
アイディア、コード、デザインなどの断片集 （忘れっぽい自分のための備忘録） snippets of idia, programming, php, design etc. (memos for space cadet) とりあえず、canvasのIDを取得するJavascript関数を作ります。 Canvasの使い方 - Canvas - HTML5.JPに詳しい情報があります。 function getCanvas (canvasID) { var canvasObj = document.getElementById(canvasID); if (canvasObj && canvasObj.getContext) { return canvasObj.getContext('2d'); } return false; } これを作ってしまえば、今後キャンバスを使う際に使い回しができま
![[html5]canvasタグで月の満ち欠けを書いてみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2edfd62d75bcedc074ea1503c021f3ff31c0fc1/height=288;version=1;width=512/http%3A%2F%2F3.bp.blogspot.com%2F_9brmIXV_AMM%2FTM-ie9ZTtsI%2FAAAAAAAAAEs%2FoXzscuVt3QM%2Fw1200-h630-p-k-no-nu%2F%25E4%25BB%258A%25E6%2597%25A5%25E3%2581%25AE%25E3%2581%258A%25E6%259C%2588%25E3%2581%2595%25E3%2581%25BE.png)
JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰し : Serendip – Webデザイン・プログラミング
HTML5 Canvas でバケツツールによる塗り潰しを実現するために、スキャンライン・シードフィル (Scan Line Seed Fill) というアルゴリズムを使ってみた。 アルゴリズムの詳細については、以下のサイトを参考にした。 参考：ActionScript入門Wiki@rsakane – 塗りつぶしアルゴリズム(スキャンライン – シードフィル編) ペイント・ルーチン (1)シード・フィル アルゴリズム 単純に言えば、水平方向に塗り潰し可能な範囲を探して塗り潰してゆき、それを塗り潰し可能な範囲が無くなるまで上下方向に繰り返していくといったもの。 JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰しデモ 塗り潰し処理のコード var fillColor = function(startX, startY, imgData, penColo
JavaScript, Canvas で putImageData による劣化を調べる : Serendip – Webデザイン・プログラミング
Ubuntu 9.10 (karmic Koala) の Google Chrome で JavaScript, Canvas の putImageData を使ってイメージの書き戻しをしていたら、イメージの色がどんどん黒っぽく変化してきた。 こちらのサイト『りす穴さくら: lislis Paintの技術的説明まとめ』によると Google Chrome では putImageData によって色が微妙に変化するので、透明な Canvas を新しく作って描画し、 drawImage で元の Canvas に書き出すという方法で対処できるらしい。 そこで、各ブラウザによってどの程度劣化するのかを putImageData と drawImage を使ってテストしてみた。 テストしたブラウザとそのバージョンは以下のとおり。 Windows Google Chrome 5.0.342.9 bet
HTML Canvasでバケツ塗りつぶし - NullPointer's
気晴らしにコード書いてないとやってらんないので、今日はJavaScriptとHTML Canvasでバケツ塗りつぶしを作成してみた。 https://nullpon.moe/dev/sample/canvas/bucketfill.html Firefox3とOpera9.6、Safari4で動きます。Safariはそこそこ速いですが他のブラウザではもっさり。こんな速度ではCanvasとjavascriptのお絵書きサイトは作れそうにないですね。ま、IEで動かないので速くなってもダメですが…。 塗りつぶしのアルゴリズムはシードフィルアルゴリズムというらしい。 追記 お絵書きサイトは作れそうにないどころか既にあった。しっかりチューニングすれば結構速くなるもんだなー http://www.gartic.com/sketch/ ものっそいのが沢山ある http://www.chromeexper
RGraph: Beautiful JavaScript charts for websites
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website. More » RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available. More » Get the latest version of RGraph (version 6.16) from
JavaScript によるオーディオ＆ビジュアルプログラミング - Radium Software
僕は JavaScript が好きだ。できるだけ多くのことを JavaScript で済ませてしまいたいと考えている。 以前は JavaScript では絵や音を扱うことができないという点がボトルネックになって，応用の幅を狭めていた。これが最近になると， Canvas 要素のおかげで絵を扱うことができるようになったり， Flash を代行役にすることによって音を出せるようになったりと，いろいろ状況が変わってきている。 そこで今回は，以前から機会があれば触ってみたいと思っていた Processing.js と SoundManager 2 を使って， JavaScript によるオーディオ＆ビジュアルプログラミングに挑戦してみた。 Processing.js とは Processing.js は，ビジュアルデザイン向けプログラミング言語 Processing を模して作られた JavaScr
デジタル書道ソフト Shodow2 （Web版） : Serendip – Webデザイン・プログラミング
Shodow2 はマウスで毛筆風の文字や絵を描けるWebアプリケーションです。 描いた絵をPNG形式の画像で保存できます。 Shodow2 は、Firefox3、Safari、Google Chrome、Opera での動作を確認しました。 Firefox3 以外のブラウザでは一部の機能が動作しなかったりする場合があります。 Shodow2 は無料で利用できます。 スクリーンショット 使用許諾 Shodow2 を利用するには以下の項目に同意して下さい。 Shodow2 の著作権は作者iNo(Serendip)が保有します。 Shodow2 で利用している各種ライブラリの著作権は各ライブラリの著作権保持者にあります。 Shodow2 のライセンスはGPLとします。（※Shodow2 で利用している各種ライブラリのライセンスは各ライブラリを確認して下さい） このソフトウェアを使用して発生したい
Saving canvas data to image file
This is a small library that lets you easily save a WHATWG canvas element as an imagefile. Files needed: canvas2image.js, base64.js Draw on the canvas with the pretty boxes below using the mouse, then click the "Convert" buttons to convert it to a downloadable image - or the "Save" buttons to download the image file directly. Using the WHATWG canvas element, you can create all sorts of cool gr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Canvasリファレンス - HTML5.JP
サービス終了のお知らせ