以下の関数は、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.
きっかけ canvasタグ上に描いた絵を保存しようとしたら、 意外に情報が見つからず苦労したんで、載せときます。 canvas? まず、canvasやHTML5についての仕様は、以下のサイトを見てください http://www.html5.jp/ 流れ 今回は、フリーハンドで描いた絵を保存します。 canvasタグを用意 お絵かき 画像情報をサーバに送り、DBに保存 DBから画像情報を取り出し表示 (ﾟДﾟ)ｳﾏｰ なお、DB関係の記述は省略します。 canvasタグを用意 <html> <head> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/canvas.js" type="text/javascript"></script> <style type="text/css">
2010年の書き初めは Canvas でした。 元日に出た Opera 10.50 pre-alpha からは HTML5 の video 要素が有効になり、とりわけ canvas に drawImage で video のフレームが置けるということで、早速 Ubuntu に Opera 10.50 を入れて遊んでました。 後で気付いたのですが、Video on Canvas は Firefox 3.5 でも普通に使えました。 その Video on Canvas がおもしろそうだったので、前からやってみたかった万華鏡を書いてみました。 http://edv.sakura.ne.jp/product/video_canvas/rectangle.html http://edv.sakura.ne.jp/product/video_canvas/triangle.html 下のほうが万華鏡ら
Mozilla Party 2009 Canvas ProgrammingAI-enhanced description This document discusses the history and development of the HTML5 Canvas element from 2009. It mentions early experiments with Canvas using JavaScript and DIV elements. It then covers the exploration of 3D graphics on 2D Canvas, different browser implementations including Opera 3D Canvas, Gecko 3D Canvas in Firefox, and Google's O3D proje
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
