Prism Effect Slider with Canvas | Codrops
A tutorial on how to create a slider with a “prism” effect using HTML5 canvas globalCompositeOperation and a layering technique. Today we’d like to show you how to build a simple slider with an interesting “prism” effect. The idea is to place a shape in front of the slider and “reflect” the images of each slide, in order to create the illusion of a prism. We’ll be using the HTML5 canvas element an
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
Canvas - Dive Into HTML5
* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> shapes natively. Every canvas starts out blank. That’s boring! Let’s draw something. Click to draw on this canvas The onclick handler called this function: function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50,
Fingerprintjs - Cookie不要でブラウザを特定する技術を体感
ブラウザを特定するためにCookieを使うのが一般的です。しかしプライバシーの問題があり、個人のブラウザ遷移を記録することないようDo Not Track機能が追加されたりと徐々に厳しくなってきています。 そんな中、新たに注目を集めているのがJavaScriptだけでブラウザを特定する技術になります。今回はそれを体感するFingerprintjsを紹介します。 Fingerprintjsの使い方 この数字は同じブラウザである限り、常に同じものが出ます。実に94%の精度でブラウザを特定できるとのことです。ブラウザの言語やユーザエージェント、セッションストレージの有無などに加えて、Canvasを使った画像生成による違いも使っています。 この数字はブラウザをシークレットモードにしても変わらないようで、非常に怖い技術と言えます。広告のトラッキングなど悪用されると相当な精度で個人のブラウザ遷移が追わ
Domvas
Wut? Domvas implements the missing piece that connects the DOM and Canvas. It gives to the ability to take arbitrary DOM content and paint it to a Canvas of your choice. That dialog that is a pain to layout in Canvas but needs to be animated? Yep. Always wanted to use CSS transforms in Canvas? Yep. I think you get the idea. Demo Usage var canvas = document.getElementById("test"); var context = can
Chrome 上で、Canvas API のダンプ、Draw call の可視化、スナップショットが取れる Canvas Profiles が超便利なのでご紹介 - latest log
Chrome には Canvas API の発行状況を可視化してくれる Canvas Profiles が搭載されています（1年ぐらい前からありました)。 これは特定の業種の人(特にCreate.jsとかPexJSを使ってる方々)にとっては神の如きツールであり、知らないと勿体ないのでシェアしますね。 ユースケース (つ◇⊂) 「Canvas のページが重いよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー (つ◇⊂) 「描画が崩れる原因がわかんないよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー です。 おまけ 機能自体は去年の7月ぐらいから利用可能で、その間にUIが何度かマイナーチェンジしていますね。 あと、プロファイルデータを右クリックすると Load 機能はあるけど Save 機能がないので、 Google Dev Summit 2013
HTML5 Drag And Drop Avatar Changer With Resizing And Cropping | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user’s Twitter avatar, Facebook avatar, or Gravatar. That’s a smart move. Avatars give users a sense of ownership over a virtual space so any way
Isomer – an isometric graphics library for HTML5 canvas
About Isomer allows you to draw isometric graphics with ease. Let's draw a simple cube. var Shape = Isomer.Shape; var Point = Isomer.Point; iso.add(Shape.Prism(new Point(0, 0, 0))); The Grid Here is the same cube overlayed with a 3D grid. This is how objects look under an isometric projection. /** * This is the 3D isometric grid that * we will be drawing on. * * The blue grid is the xy-plane. * Th
Mobile Safariで扱うことができる画像のサイズの上限 - memo.yomukaku.net
公開日時: 2011-12-19 19:30 Mobile Safariで画像を表示するアプリケーションや、canvasにdrawImage()で画像を表示するアプリケーションをテストしていると、時折画像が表示されない場合があります。 例えば、上の画像はMobile Safariのcanvasに1787px * 2527pxのPNGをdrawImageで描画しようとした状態ですが、何も表示されていません。デスクトップ用のブラウザーでは問題なく表示れます。 原因はiOSのリソースリミットにありました。 iOSの画像に関する各種の上限値 AppleのSafari Developer LibraryのKnow iOS Resource Limitsの節を見ると、iOSの画像に関する上限値が書かれていました。 iOS Mobile Safariの画像に関するサイズ等に関する制限をまとめると以下の
iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal
iOS6によるアップデート まず最初に、iOS6において、Safari上のWebアプリから簡単にカメラ＆フォトライブラリの写真にアクセスできるようになりました。いままでカメラにアクセスするにはPhoneGapなり何なりでネイティブ化する必要があったので、写真共有サービスなどにはかなり有用なアップデートです。 File API、HTML Media Capture への対応 HTML Media Capture に対応し、Safari から カメラを起動してのファイルアップロードが可能になりました。 type 属性値に file を指定すれば単体ファイルのアップロードが簡単に。 （略） ファイルを選択したあとは何ができるか... action による Multipart post Ajax （XMLHttpRequest 2） を使用したファイル送信（プログレス表示にも対応） File AP
Introducing the Canvas Debugger in Firefox Developer Tools – Mozilla Hacks - the Web developer blog
The Canvas Debugger is a new tool we’ll be demoing at the Game Developers Conference in San Francisco. It’s a tool for debugging animation frames rendered on a Canvas element. Whether you’re creating a visualization, animation or debugging a game, this tool will help you understand and optimize your animation loop. It will let you debug either a WebGL or 2D Canvas context. You can debug an animati
AXXT - Web development and more » Canvas 3D Graph
This is Canvas 3DGraph, special type of bar graph used to plot X-Y-Z values. As you may know, <canvas> tag is not supported in IE, so I was forced to use excanvas.js in order to draw graph in IE. As the result of that, you may experience some freezes when you try to plot large […] This is Canvas 3DGraph, special type of bar graph used to plot X-Y-Z values. As you may know, <canvas> tag is not supp
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
McDonald’s UK
New Monopoly Power Peel at McDonald’s</h2>\r\n","dc:description":"<p>Peel on pack, make moves in App!</p>\r\n","xdm:linkURL":"https://monopoly.mcdonalds.co.uk/"}}" data-component="teaser">
Zoomquilt
The Zoomquilt A collaborative infinitely zooming painting Created in 2004 Up and down keys to navigate A project by Nikolaus Baumgarten Participating illustrators: Andreas Schumann, Eero Pitkänen, Florian Biege, Jann Kerntke, Lars Götze, Luis Felipe, Marcus Blättermann, Markus Neidel, Paul Painter, Oliver Schlemmer, Sonja Schneider, Thorsten Wolber, Tony Stanley, Ville Vanninen The Zoomquilt on Yo
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
ドラッグアンドドロップした画像をcanvasに描画する - 技術めも
canvasにローカルの画像ファイルを描画するには - 技術めもとほぼ同じ処理です。 画像の選択をinput type="file"で対応していたのを、ドラッグアンドドロップでできるようにしただけです。 仕様の概要はこんな感じです ドラッグアンドドロップしたローカルファイルを参照すること 参照した画像ファイルをcanvasに描画すること ローカルで完結すること ソースは以下の通り HTML <div id="drawArea"> <canvas id="myCanvas" width="300" height="300"></canvas> </div> <div id="uploadArea"> <input id="uploadFile" name="image" type="file" /> </div> javascript // ドラッグ要素がドロップ要素に重なっている間 win
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Flipboard/react-canvas: High performance <canvas> rendering for React components
Cabbi.bo
Canvas drawImage() で画像を縮めすぎるとギザギザする問題を解消する - jsdo.it - Share JavaScript, HTML5 and CSS