HTML5 キャンバスを使用してスクラッチ カード効果を達成する_JavaScript スキル

まず効果をお見せしましょう:

デモを見る ソースコードのダウンロード

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

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

HTML

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

<canvas></canvas> 

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'; 
canvas.style.position = 'absolute'; 
var imgs = ['p_0.jpg','p_1.jpg']; 
var num = Math.floor(Math.random()*2); 
img.src = imgs[num]; 

次に、画像が読み込まれたことが検出されたら、関数layer()を使用してプレスイベントとeventUp()を描画します。はリリースイベントを定義し、eventMove()は移動イベントを定義します。このイベントでは、押されたときに座標変位が取得され、円弧(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; 
 function layer(ctx) { 
  ctx.fillStyle = 'gray'; 
  ctx.fillRect(0, 0, w, h); 
 } 
 function eventDown(e){ 
  e.preventDefault(); 
  mousedown=true; 
 } 
 function eventUp(e){ 
  e.preventDefault(); 
  mousedown=false; 
 } 
 function eventMove(e){ 
  e.preventDefault(); 
  if(mousedown) { 
    if(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) - offsetY || 0; 
    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'; 
 ctx.fillRect(0, 0, w, h);//绘制矩形 
 layer(ctx); 
 ctx.globalCompositeOperation = 'destination-out'; 
 canvas.addEventListener('touchstart', eventDown); 
 canvas.addEventListener('touchend', eventUp); 
 canvas.addEventListener('touchmove', eventMove); 
 canvas.addEventListener('mousedown', eventDown); 
 canvas.addEventListener('mouseup', eventUp); 
 canvas.addEventListener('mousemove', eventMove); 

上記の内容は参考用です。実際の状況とバックグラウンドプログラムやデータベースを組み合わせて、実際のスクラッチオフを完成させることができます。上記の内容は、スクラッチ カード効果を実現するために HTML5 Canvas を使用して作成したものです。気に入っていただければ幸いです。