Water canvas by Almer ThieFor more information about this Water Canvas and a tutorial on how to put it on your own website, see my blog post Water ripple FX with Canvas and Javascript on code.almeros.com.
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.
canvid.js
canvid is a tiny dependency free library for playback of relatively short videos on canvas elements. Why not just use HTML5 video? Because you can't embed and autoplay HTML5 videos on iOS! Yeah, that sucks. Why is this better than using an animated GIF? Videos look kind of gross when converted to animated GIFs because of the colors sampling. Also the file size of video GIFs can get pretty huge. GI
60fps on the mobile web — Flipboard Engineering
Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we’re coming full circle and bringing Flipboard to the web. Much of what we do at Flipboard has value independent of what device it’s consumed on: curating the bes
Canvasとブラー(EaselJSでもBlur） | eternity design BLOG
このブログをリニューアルしたときに、 各エントリーのメインビジュアルのサイズが変更となってしまったことにより、 投稿済みのエントリーについてどうするかということで、制作し直すのは面倒ということで、各画像で一番利用されているカラーを取得し、 そのカラーで背景を塗りつぶし、画像自体にインナーシャドウを適用するということをやっていました。 iTunes11ぐらいがそんな感じの表現だったような気がしています。 ということをエントリーする予定だったのですがしなかった。 ただ、この表現、どうしても取得されるカラーと画像自体から受ける印象に差が出ることがあって、気に入っていない部分もあったので 今回違う表現方法にしてみた。 丁度iTunes12のアルバムのような感じです。 ブラー処理を適用しているのですが、実装にいたるまでの流れをご紹介。 まずは、ASに近い間隔で扱え、かつ最近アップデートされたというこ
Canvas 2D: New docs, Path2D objects, hit regions – Mozilla Hacks - the Web developer blog
Over the last year, a couple of new HTML Canvas 2D features were implemented in Firefox and other recent browsers, with the help of the Adobe Web platform team. Over on MDN, the documentation for Canvas 2D got a major update to reflect the current canvas standard and browser implementation status. Let’s have a look what is new and how you can use it to enhance your canvas graphics and gaming conte
MagicEye.js
Show Magic Eye Show Depth Map Redraw Shapes Draw Your Own! MagicEye.js is a JavaScript library for generating "Magic Eye" images in the browser. Technically, it generates single-image random dot stereograms, or SIRDS. In the above example, pixel values from an HTML5 Canvas are turned into depth data, which are then used to generate a Magic Eye image. The code looks something like this: var canvas
SUPER-LOOPER - Univers Labs
YOUR BROWSER IS TOO OLD. OR TOO STUPID. OR TOO OLD AND STUPID. OR MAYBE WE'VE BEEN STUPID. SO SORRY.
iPhone5s に機種変したので Canvas で遊んでみたよ | WebDelog
先月のことですが、ついに iPhone4(sじゃないです) を機種変して iPhone5s に機種変しました。 ちょっと大きくなった本体と、ガラス背面と側面のフレームのくぼみが無くなって手にフィットしなくなったのにちょっと戸惑いつつも、 文字を打つだけでアプリが落ちたり、ホームボタンがなかなか効かない現象から開放されたことが何より嬉しいです。 Canvas の動作を比較してみることにしました という訳で4 → 5s でどのくらい Canvas の処理能力が上がったのかをチェックしました。 今回はそのままお持ち帰りしてきた iPhone4 との比較を行っています。 検証環境 iPhone4, iPhone5s 共に iOS 7.0.4 でブラウザは Safariを使用しました。 プログラム中で使用したライブラリ Canvas のAPIを扱うのに CreateJS(EaselJS)を, FPS
FN1312001 | Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS | HTML5 : テクニカルノート
Flash Professional CC 13.1から、新たなドキュメント形式として[HTML5 Canvas]が加わりました。これまでの[Toolkit for CreateJS]パネルによる[パブリッシュ]に替えて、ドキュメントからHTML5とCanvasに対応させようというものです。本稿では、FlashドキュメントをHTML5 Canvas形式に変換し、CreateJSで手を加えるまでの流れを簡単にご紹介します。 01 HTML5 Canvasドキュメント Flash Professional CCを13.1にアップデートして起ち上げると、[スタートアップスクリーン]の[新規作成]の初めに[HTML5 Canvas]が表れます(図001)。FlashなのにFlash Playerを使わない形式が先頭に来なくてもよさそうな気はしなくもありません。 図001■[スタートアップスクリーン
Exploring canvas drawing techniques — Perfection Kills
Exploring canvas drawing techniques Table Of Contents (toggle) Basics Simple pencil Smooth connections Edge smoothing with shadows Storing points Storing points with shadow Edge smoothing with radial gradient Bezier curves Brush, Fur, Pen Fur (rotating strokes) Pen (variable segment width) Pen #2 (multiple strokes) Thick brush Sliced strokes Sliced strokes with opacity Multiple lines Multiple line
SVGヤバイ 2013冬 - fragmentary
Chrome 31がStableになって久しい。何が変わったのか思い出せないんだけど、ひとつだけ覚えてるのがこちら。 (@156422) - b87d44f — Allow SVG images to not taint the canvas with drawImage/drawPattern WebKitのパッチをマージしたものらしい。ちょっとずつ離れているらしいけど、まだお互い共有できるパッチもあるんだね。 さて、このパッチによって、CanvasでSVG画像をdrawImage()などで描画したとき、条件によってはそのCanvasがtaintされなくなった。 Tainted Canvasとは CanvasにはdrawImage()など、画像をCanvasに描画するメソッドがある。ここで、スクリプトとsame-originではないとこにある画像を描画してしまうと、セキュリティ上の都合か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - phoboslab/jsmpeg: MPEG1 Video Decoder in JavaScript
Particles in Canvas - hop.ie
PlayCanvas - The Web Graphics Creation Platform
http://typeface.neocracy.org/
Physical Typography - Resonate 2014
Hébergement, enregistrement de nom de domaine et services internet par 1&1 Internet
WordPress › Error
http://cutjs.org/