JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰し : Serendip – Webデザイン・プログラミング
HTML5 Canvas でバケツツールによる塗り潰しを実現するために、スキャンライン・シードフィル (Scan Line Seed Fill) というアルゴリズムを使ってみた。 アルゴリズムの詳細については、以下のサイトを参考にした。 参考：ActionScript入門Wiki@rsakane – 塗りつぶしアルゴリズム(スキャンライン – シードフィル編) ペイント・ルーチン (1)シード・フィル アルゴリズム 単純に言えば、水平方向に塗り潰し可能な範囲を探して塗り潰してゆき、それを塗り潰し可能な範囲が無くなるまで上下方向に繰り返していくといったもの。 JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰しデモ 塗り潰し処理のコード var fillColor = function(startX, startY, imgData, penColo
HTML5 Canvasいじり - juntkの日記
http://www.geocities.jp/psipage/html5/html5_canvas2.html boxの中でクリックすると素敵な円が現れます。マウス座標にも付いていくはず。 ソース <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Example2: HTML5 canvas</title> <!--http://d.hatena.ne.jp/juntk/--> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="ms">Click in the box. </div> <canvas id="canvass
[html 5][JavaScript]Flashを使わずにお絵かきソフトを作る
昨日のエントリーでcanvasタグの中で図形を描くというのを書いたが、となると当然、脊髄反射的に作ってしまうのがお絵かきソフト。 さっそくソースを紹介します。 <div id="container"> <canvas id="draw_canvas" width="300" height="240" style="border:solid 1px #000000;" onMouseDown="DrawInstance.MouseDown();" onMouseMove="DrawInstance.MouseMove();" onMouseUp="DrawInstance.MouseUp();" onMouseOut="DrawInstance.MouseOut();" onMouseOver="DrawInstance.MouseOver();" ></canvas> </div> <sc
jConnecter | mapo-dev.de
Was ist jConnecter? jConnecter ist eine Javascript Datei die es ermöglicht Daten zu visualisieren. Regelrecht kann man sagen, dass jConnecter eine eigenständige Kopie von mooWheels ist. Jedoch handelt es sich hier um ein jQuery Plugin. Wie benutze ich jConnecter? In deiner Seite muss folgendes stehen um den jConnecter zu initialsieren. $(document).ready(function() { $("#canvasBox").jConnecter( /
Canvas のコードスニペット - Code snippets | MDN
以下の関数は、canvas 内にある r、g、b で指定した RGB 色を持つピクセルの数を返します。これは こちらのブログ記事 で説明しているように、例えばある領域と、その上にユーザーが描いた領域を比較するときにとても役に立ちます。 function getpixelamount(canvas, r, g, b) { var cx = canvas.getContext('2d'); var pixels = cx.getImageData(0, 0, canvas.width, canvas.height); var all = pixels.data.length; var amount = 0; for (i = 0; i < all; i += 4) { if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.
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ページを開く
SVG と Canvas の比較（ソースを見てね）