Ludei - We love HTML5HANG TIGHT. YOU WILL BE REDIRECTED...
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
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
HTML5で本格的なゲームを作る！（日経ソフトウェア10月号特集3）
今日発売の日経ソフトウェア10月号で、「HTML5で本格的なゲームを作る」という特集を寄稿しました。 この特集は、HTML5のCanvasを使用して、全画面がぐりぐり動くようなゲームを作ってみようという趣旨です。そのゲームのお題として、かの有名なBio_100%のmetysさんのゲーム「ろりろりろーりんぐ」の使用許諾をいただきました（関係者の皆さん、ありがとうございます！）。 ゲームは、こちらから試していただけます： http://nmi.jp/game5/rolling/ ソースコード一式は、こちらからダウンロードできます： http://nmi.jp/game5/rolling.zip iPhone3GS/iPhone4専用のゲームとなっておりますが、そのスクリーンキャプチャをご紹介しましょう。 ソースコードの詳しい説明を特集でしております。今までのHTMLでは到底実現できない表現を、
Disable Interpolation when Scaling a <canvas>
NOTE: This has to do with how existing canvas elements are rendered when scaled up, not to do with how lines or graphics are rendered onto a canvas surface. In other words, this has everything to do with interpolation of scaled elements, and nothing to do with antialiasing of graphics being drawn on a canvas. I'm not concerned with how the browser draws lines; I care about how the browser renders
drawImage() メソッド - Canvasリファレンス - HTML5.JP
構文 context . drawImage(image, dx, dy) context . drawImage(image, dx, dy, dw, dh) context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) canvas に指定のイメージを描画します。引数は、次のように解釈されます： もし、第 1 引数が img, canvas, video 要素でないなら、TYPE_MISMATCH_ERR 例外を投げます。image にイメージ・データがないなら、INVALID_STATE_ERR 例外を投げます。数値の引数に矛盾があるなら（例えば、描画先が 0 × 0 の矩形）、INDEX_SIZE_ERR を投げます。image が完全にデコードできていないなら、何も描画されません。 仕様 canvas上に画像を表示するには、
Phaser - A fast, fun and free open source HTML5 game framework
WebGL & Canvas Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support. This allows for lightning fast rendering across Desktop and Mobile. Preloader We've made the loading of assets as simple as one line of code. Images, Sounds, Sprite Sheets, Tilemaps, JSON data, XML - all parsed and handled automatically, ready for use in game and
スマートフォン用にhtml5でアニメーションを記述したので備忘録 - oggataの日記
1.メインとなる処理は下記の４つ。 html5で動画を記述する場合、画像を描画>画像を保存>画像を削除 の繰り返し clearRectでcanvas全体をクリアすることもあるが 例）ctx.clearRect(0,0,cW,cH); できる限り変更のあった部分にフォーカスして削除した方が処理は速い。 削除 clearRect() 状態保存 save() 図形描画 fill(),stroke() 状態回復 restore() 繰り返し setInterval() 2.html側に作ったcanvasを取得して、準備をする段階はどんな処理も同じ。 var canvas=document.getElementById('canvas'); if (!canvas||!canvas.getContext) return false; var ctx = canvas.getContext('2d')
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
自動車免許.club - このウェブサイトは販売用です！ - 自動車免許 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証 | ICS MEDIA
HTML5で2次元のインタラクティブコンテンツを制作するには、さまざまなJavaScriptライブラリがあります。どれを選択するべきか迷いどころではないでしょうか？ そこで今回はHTML5の各種JavaScriptライブラリについて、パフォーマンスを比較検証してみました。 今回検証したフレームワーク メジャーなJavaScirptライブラリとして次の5種類でテストしました。バージョンは2013年4月10日現在の最新版を使っています。詳しい検証方法は記事の後半にまとめています。 CreateJS (EaselJS 0.6.0) Arctic.js (v0.1.11) enchant.js (v0.6.3-48) Pixi.js (v1.0.0) Processing.js (v1.4.1) 各種JavaScirptライブラリのベンチマーク結果 ※グラフの数値が高いほどパフォーマンスが高いこと
HTML Standard
Firefox1.5+Safari2+Chrome1+Opera9+Edge79+Edge (Legacy)12+Internet Explorer9+Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ Categories:Flow content.Phrasing content.Embedded content.Palpable content.Contexts in which this element can be used:Where embedded content is expected.Content model:Transparent, but with no interactive content descendants except
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Video Destruction
PixiJS v4
http://kudox.jp/java-script/createjs-shape-twinkle
Beautiful HTML5 Charts & Graphs | 10x Fast | Simple API
日本全国花粉飛散マップ Pollen Map in Japan - ICS
designbuildplay.co.uk
CAAT
Three.js – JavaScript 3D Library
