【18：スクラッチくじ】Canvasをレイヤーの様に使う - one's way blog
プロジェクトNo.18：スクラッチくじ Canvasを２枚重ねて、前面のcanvasをマウスダウンとマウスムーブで消すといったものを作りました。 Canvasをレイヤーの様に使うために まずHTMLで２つのcanvasエレメントを用意します。 HTML <canvas id="parent" width="400" height="300"></canvas> <canvas id="child" width="400" height="300"></canvas> 次にCSSでcanvasに対してposition: absoluteを指定。 CSS canvas{ position: absolute; } ||< あとは、JavaScriptの方でそれぞれのcanvasエレメントに対してオブジェクト生成し、 それぞれに処理を行っていきます。 ***JavaScript >|javasc
キャンペーンサイトに使えそう！<CANVAS>タグを使った画像のスクラッチ表現
Scratch Reveal with <canvas>は、<canvas>タグとJSで実装する、画像のスクラッチ表現です。 カラフルな写真にマウスを載せて、ドラッグすると、スクラッチを削るようにグレースケースの写真が現れます。 もちろん、デフォルトをグレースケールの写真にして、スクラッチでカラフルな写真を表示させることも可能です。 例えば、キャンペーンサイトなどで、画像にシリアルコードや当たり、ハズレのマークを埋め込んでおいて、ユーザーが画像を削ると表示される、という使い方ができそうです。 実装方法 デフォルトに表示される画像と、スクラッチで削った後に表示される画像の2枚を用意しておきます。 HTML <canvas>を用意します。 <figure id="bridgeContainer"> <canvas id="bridge" width="750" height="465"></c
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Serialize canvas content to ArrayBuffer and deserialize again
