FN1205002 - PreloadJSで外部画像ファイルの読込みを待つ - HTML5 : テクニカルノート
PreloadJSは、画像のほか、サウンドやJavaScriptなどの外部データを読込んで、その経過や完了を捉えて処理するためのライブラリです。本稿では、画像ファイルの読込みを待って、その画像にもとづく処理を加えてみます。 なお、読込み待ちのない外部画像ファイルの扱いについては、「EaselJSで外部ビットマップファイルを読込んで回す」をご参照ください。 01 外部画像ファイルを読込んでCanvasの中央に表示する PreloadJSのライブラリは、予めサイトからダウンロードして、適切な場所に保存しておいてください(図001)。本稿では、HTMLドキュメントと同じ階層に、ダウンロードしたpreloadjsフォルダが置いてあるものとします。 図001■PreloadJSライブラリのJavaScriptファイル まずは、PreloadJSのプリロードなしに、外部画像ファイルを読込んでCanva
FN1209005 - EaselJSでインスタンスにマスクをかける - HTML5 : テクニカルノート
2012年8月にCreateJS Suiteの新しいバージョンが公開されました。そして、新たなEaselJS 0.5.0にはDisplayObject.maskプロパティが備わり、インスタンスをShapeオブジェクトでマスクできるようになりました。本稿ではこのプロパティを試します。 01 ふたつ重ねた同じ画像のインスタンスの下側にフィルタをかける まずは、同じ画像が読込まれたBitmapインスタンスをふたつ重ね、その下側のインスタンスにフィルタをかけます。そして、次項で手前のインスタンスをマスクで抜くつもりです。 使うフィルタはふたつです。第1に、ColorMatrixFilterで画像イメージをセピア調に変えます。DisplayObjectインスタンスへのフィルタのかけ方とColorMatrixFilterの操作については、「EaselJSのフィルタColorMatrixFilterでイ
FN1204005 - EaselJSで外部ビットマップファイルを読込んで回す - HTML5 : テクニカルノート
EaselJSで外部から読込んだビットマップファイルをCanvasに表示し、さらにアニメーションで回してみます。EaselJSの基本的な使い方や必要な設定については、「EaselJSで図形を描く」をお読みください。 01 円のShapeインスタンスをふたつつくる ビットマップはPNGファイル(Pen.png)で用意しました。HTMLドキュメントと同じ場所に画像用のフォルダ(images)をつくり、その中に納めます(図001)。 図001■PNGファイルを画像用フォルダに納める HTMLドキュメントの<body>要素には<canvas>要素("myCanvas")が記述され、描画のためのJavaScriptの関数(xInitialize())を呼出しているものとします。EaselJSの基本的な設定については、前出「EaselJSで図形を描く」をお読みください。 <body onload="x
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
