Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
最近のHTML5の盛り上がりには勢いがありますが、実際の所HTML5はどうなのか気になったので描画パフォーマンスを測定してみました。上記のグラフが結果ですが、HTML5で一番よい実装よりもFlashのほうが3倍弱高速という結果がでました。ブラウザによってはFlashのほうがHTML5より18倍も高速という結果もでています。 さらに言えば、HTML5の描画パフォーマンスが最も良かったのはSafariですが、ブラウザによってはそれの15%ぐらいのパフォーマンスしかでないブラウザもあり処理速度にばらつきが大きいのが特徴でした。ですが、Flashはどのブラウザでもスコアの振れ幅が小さくブラウザ間の処理速度は安定しているように思います(プラグインなので当然といえば当然の結果ですが)。 検証デモ HTML5やFlashと言っても様々な実装方法があるので、よく使われる方法を幾つか用意して検証しています。
デブサミ2012セッション「IE10とHTML5」に登壇しました！ - IT-Walker on hatena
マイクロソフトさんからの依頼を受けて、WebSocket、IndexedDB、File APIを使用したIE10向けのサンプルを作成し、それを発表＆解説するという形でセッションに登壇しました。 登壇予定はもともとなかったものの、予想外の形でお声がけいただき、デブサミでも壇上に立つことが出来ました。ありがたやありがたや。 今回は、チームメンバーのほぼ全員がHTML5未経験という状態で、3週間でデモを3つ作るというなかなかハードなスケジュール。 とはいえ、アジャイルな開発を行ったおかげか、徹夜だとかそういうこともなく、無事当日を迎えることが出来ました。 3週間たってみると、上記の3APIのみならず、Node.js+Socket.IO/video,audio要素/CSS3 Animation/CSS3 Transition/CSS3 2D Transform/Canvas（アニメーション）/Dr
Internet Explorer ブログ (日本語版)
英語版 IEBlog の翻訳記事と、日本の Internet Explorer 関連の話題をお届けする、マイクロソフトの公式ブログです。 本ブログの運用終了のお知らせ Internet Explorer ブログ (日本語版) をご覧いただきありがとうございます。 2015年10月1日の「Microsoft Edge Japan... Author: Yoshitaka Kasugai Date: 10/08/2015 IE11でドキュメントモードが使用されるときのフローチャート MSDNライブラリで公開されている「IE11でドキュメントモードが使用されるときのフローチャート」を日本語化したドキュメントを公開いたします。ドキュメントモードを指定する際の参考にしてください。... Author: Yoshitaka Kasugai Date: 05/24/2015 「新しい Internet
CanvasとPhoneGapで作るiPhone用落書きアプリ (1/4)
HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回は、HTML5で作成したWebアプリケーションを、PhoneGapを使ってiPhoneアプリに変換してみましょう。 本連載では以前、HTML5で作ったWebアプリケーションを、「NimbleKit」でiPhoneアプリに変換する方法を取り上げました。 この記事では、PCのブラウザー向けに作成したお絵かきアプリを、iPhoneアプリに移植しました。多少の変更は必要でしたが、比較的すんなりと移植できたケースです。 このiPhoneアプリでは、NimbleKitのスライダー機能を使ってペンの色を指定しましたが、残念ながらPhoneGapにはNimbleKitのように手軽に使えるスライダー機能がありません（jQuery UIもしくはjQuery Mobileのようなライブラリーを利用すれ
すげえ！FlashLite1.1を解析してHTML5に変換·FlashForward MOONGIFT
ガラケーはFlashLiteに対応しており、多数のゲームが開発されてきました。そうした既存の資産を活かすべく開発されているのがFlashForwardです。iOS向けにFlashLite1.1からHTML5へ変換するソフトウェアです。 デモは多数用意されています。 アニメーションします。 SVGの他にCanvas阪も用意されています。 テキスト含めたアニメーションも可能です。 こういうゲーム系で活躍します。 陣取りゲーム風ゲームも再現できています。 こういうアニメーションはCanvasのが高速です。 指定した形を描きます。 日本語も使えます。 複雑なキャラクターも描けて、アニメーションもばっちりです。 左右に動いたりします。 バナーレベルは十分に使えます。 まさにゲーム用途にぴったりです。 FlashForwardでは予めSWFファイルを解析し、HTML5/SVGまたはCanvas/Jav
DNA Model using HTML5
Select from up to 7 fixed color schemes or let the application generate a random sequence following the basic pairing rules for a DNA sequence (A - T & C - G). Additionally, you can change the number of pairs and the vertical spacing between each pair at any time. Feel free to explore different combinations. :) This experiment uses the HTML5 canvas element to generate a DNA structure on the fly.
jQueryスライドショープラグインいろいろ
Slider.js: Slideshow wit... / Diapo | a free jQuery sl... / Nivo jQuery Slider他...全20件
MDN Web Docs - Mozilla
Resources for Developers, by DevelopersUnited in love //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../../ ../../<></><></><></><></><></><></><></><></><></><></><><
MotionCAPTCHA – Stop Spam, Draw Shapes - Joss Crowcroft
MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas Harmony procedural drawing tool by Mr Doob and the $1 Unistroke Gesture Regonizer algorithm (and the more recent Protractor algorithm improvement), requiring users to sketch the shape they see in the canvas in order to submit a form. At the moment, it’s just a proof-of-concept – it only uses client-side gesture recognition, and do
Create a Drawing App with HTML5 Canvas and JavaScript
This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn: How to draw dynamically on HTML5 canvas The future possiblities of HTML5 canvas The current browser compatibility of HTML5 canvas Each step includes a worki
新JavaScript例文辞典
このページはJavaScriptの例文／サンプルを掲載しています。なお、対象としているのは基本的にWeb標準ブラウザ (Firefox, Safari, Google Chrome, Operaなど) としているため標準仕様から外れているInternet Explorer 6～8では動作しないものがあります。Internet Explorer 8より前のバージョンに関しては以前のJavaScript例文辞典を参照してください。このサイトではInternet Explorer 8以降には、ある程度対応しています。IE9からはCanvasなどHTML5関連APIにも対応しています。 iPhone/iPadおよびAndroid 4もHTML5に対応しています。ただし、Android 2.xに搭載されている標準ブラウザでは対応していないAPIが多いため、ほとんど動作しません。 カテゴリ内のページの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
camanjs.com
humble software development - flotr
タイプライターのサンプル その１ - jsdo.it - Share JavaScript, HTML5 and CSS