HTML5 キャンバス タグはスクラッチ カード効果を実装します_html5 チュートリアル スキル

スクラッチ カードで遊んだことがありますか?偶然賞品を獲得できるタイプ。今日は、HTML5 テクノロジーに基づいたスクラッチ カードのエフェクトを紹介します。PC ではマウスを押したままにするだけで、携帯電話では実際のスクラッチをシミュレートできます。効果。

ソース コードのダウンロード: クリックしてダウンロード

HTML5 Canvas を、それが提供する API と組み合わせて使用​​し、Canvas 要素上に灰色のマスク レイヤを描画し、ユーザーのマウスの動きとジェスチャを検出して透明なグラフィックを描画します。これにより、Canvas の背景が見えるようになります。実際の写真はスクラッチ カード効果を実現できます。

HTML

キャンバス タグ要素をページに追加するだけで済み、残りは JavaScript に依存します。 Canvas 要素は HTML5 に固有の要素であり、HTML5 をサポートする最新のブラウザ上で実行されることに注意してください。

コードをコピー

コードは次のとおりです。

JavaScript

まず、ページのマウス選択とドラッグ イベントを無効にする、つまり選択操作を実行しないようにする必要があります。

コードをコピーします

コードは次のとおりです:

var bodyStyle = document.body .style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none'; 次に、画像クラスを定義し、canvas 要素を取得し、背景を設定します。そして位置属性。この例では 2 枚のランダムな写真を使用し、毎回ランダムな写真を背景として更新します。

コードをコピーします

コードは次のとおりです。

var img = new Image( );

var Canvas = document.querySelector('canvas');

canvas.style.backgroundColor='transparent';
var imgs = [ 'p_0.jpg','p_1.jpg'];
var num = Math.random()*2);
imgs[num];
次に、画像が読み込まれたことが検出されたら、関数layer()を使用してプレスイベントを定義します。 eventMove() はリリースイベントを定義し、押されると座標変位が取得され、arc(x, y, 10, 0, Math.PI * 2) を通して小さなドットが描画されます。

コードをコピー

コードは次のとおりです。

img.addEventListener('load ', function (e) { var ctx; var w = img.width,

h = img.height;

var offsetX = Canvas.offsetLeft,

offsetY = Canvas.offsetTop ;
var Mousedown = false;

関数 Layer(ctx) {
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, w, h); > }

関数eventDown(e){
e.preventDefault();
Mousedown=true;
}

関数eventUp(e){
e .preventDefault( );
マウスダウン = false;
}

関数eventMove(e){
e.preventDefault();
if(mousedown); e.changedTouches ){
e=e.changedTouches[e.changedTouches.length-1];
}
var x = (e.clientX document.body.scrollLeft || e.pageX) - offsetX || 0 ,
y = (e.clientY document.body.scrollTop || e.pageY) -
with(ctx) {
beginPath()
arc(x) , y, 10, 0, Math.PI * 2);//ドットを描画します
fill();
}
}
}

//...
} );


最後に、キャンバスを通じて上記の関数を呼び出し、グラフィックを描画し、タッチ イベントとマウス イベントをリッスンして、対応する関数を呼び出します。コードを参照してください。



コードをコピーします

コードは次のとおりです:

img.addEventListener('load', function(e) {
//..前のコードからの続き
Canvas.width=w;
Canvas.height=h;
Canvas.style.backgroundImage='url(' img.src ')';
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent'; (0 , 0, w, h);//長方形を描画します
Layer(ctx);

ctx.globalCompositeOperation = 'destination-out'

Canvas.addEventListener(' touchstart'、eventDown);
Canvas.addEventListener('touchmove'、eventMove);
Canvas.addEventListener('mousedown'、eventUp); > Canvas.addEventListener('mouseup',eventUp);
canvas.addEventListener('mousemove',eventMove);


デモで完全なコードをダウンロードできます。実際のニーズに応じた背景を使用して、実際のスクラッチ カード プログラムを完成させるためのプログラムとデータベース
。