読者です 読者をやめる 読者になる 読者になる

monacaで作成 canvasを使ったスクラッチカードアプリ

f:id:meikotan:20170319220425p:plain

クラッチカードの結果用の canvas と、削られる用の canvas を重ねて設置する。
削られる部分の canvas にタッチして色をクリアにすると、結果用の canvas に書かれた文字が見える。


HTML

<style>
canvas{ position: absolute; }
</style>

<canvas id="parent" width="400" height="300"></canvas>
<canvas id="child" width="400" height="300"></canvas>


javascript

var resultString= "1等";

// スクラッチ読み込み
var canvas  = document.getElementById("parent"),
  canvas2 = document.getElementById("child");
var ctx     = canvas.getContext('2d'),
    ctx2    = canvas2.getContext('2d');
 
var startX,startY,x,y,
    isDrawing = false;
    
// 結果用の canvas レイヤ
// canvas の初期化
ctx.fillStyle = "#fff";     
ctx.fillRect(0,0, canvas.width, canvas.height); // 塗りつぶし

// 文字の描画
// 文字のフォント設定
ctx.font = "bold 26px 'MS Pゴシック'";
ctx.textAlign = 'center';
ctx.fillStyle = '#ff0000';

// 結果の描画
ctx.fillText(resultString, canvas.width/2, canvas.height/2, canvas.width); // (文字,始点x,y,最大横幅)に文字を描画


// 削る用の canvas レイヤ
// canvas の初期化      
ctx2.fillStyle = "#999999";
ctx2.fillRect(0,0, canvas.width, canvas.height); // 塗りつぶし


// タッチ開始  
$('#child').on('touchstart', function(e) {   
 isDrawing = true;
  
 // 開始位置としてタッチした場所を設定
  var canvas2Rect = canvas2.getBoundingClientRect();
  var touch = event.targetTouches[0];
  startX = Math.floor((touch.pageX-canvas2Rect.left)/(canvas2Rect.right-canvas2Rect.left)*canvas2.width);
  startY = Math.floor((touch.pageY-canvas2Rect.top)/(canvas2Rect.bottom-canvas2Rect.top)*canvas2.height);
});

// タッチ中
$('#child').on('touchmove', function(e) {
 if(!isDrawing) return;

  // 終了位置の設定
  var canvas2Rect = canvas2.getBoundingClientRect();
  var touch = event.targetTouches[0];

  x = Math.floor((touch.pageX-canvas2Rect.left)/(canvas2Rect.right-canvas2Rect.left)*canvas2.width);
  y = Math.floor((touch.pageY-canvas2Rect.top)/(canvas2Rect.bottom-canvas2Rect.top)*canvas2.height);
  ctx2.beginPath();
  ctx2.moveTo(x, y);
  ctx2.clearRect(x,y,40,40, 2*Math.PI, true); // 切り抜き
  startX = x;
  startY = y;
});

// タッチ終了
$('#child').on('touchend', function(e){
 isDrawing = false;
});           
}

自分で作るスクラッチカードくじ

play.google.com