キャンバスでPS消しゴムスクラッチカードの効果を実現するためのJSの使用方法の詳細な説明

 <div class="box" id="bb">
        <canvas id="cas" width="1366" height="651"></canvas>
    </div>
 
    <script type="text/javascript" charset="utf-8">
        var キャンバス = document.getElementById("cas"),
            ctx = キャンバス.getContext("2d");
        var x1, y1, a = 30,
            タイムアウト、totimes = 100、
            江下 = 30;
        キャンバスの幅 = document.getElementById("bb").clientWidth;
        キャンバスの高さ = document.getElementById("bb").clientHeight;
        var img = 新しい画像();
        画像を拡大
        img.onload = 関数() {
            ctx.drawImage(画像, 0, 0, キャンバス.幅, キャンバス.高さ)
            //ctx.fillRect(0,0,キャンバス.幅,キャンバス)
            タップクリップ()
        }
 
        //globalCompositeOperation関数tapClip()を変更して消去効果を実現します。
            var hastouch = "ontouchstart" in window ? true : false,
                tapstart = hastouch ? "touchstart" : "mousedown",
                tapmove = hastouch ? "touchmove" : "mousemove",
                tapend = hastouch ? "touchend" : "mouseup";
 
            ctx.lineCap = "丸い";
            ctx.lineJoin = "丸め";
            ctx.lineWidth = a * 2;
            ctx.globalCompositeOperation = "destination-out";
 
            canvas.addEventListener(tapstart, 関数(e) {
                clearTimeout(タイムアウト)
                e.preventDefault();
 
                x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft;
                y1 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop;
 
                ctx.save();
                ctx.beginPath()
                ctx.arc(x1, y1, 1, 0, 2 * Math.PI);
                ctx.fill();
                ctx.restore();
 
                キャンバスにイベントリスナーを追加します。
                canvas.addEventListener(tapend, 関数() {
                    キャンバスのtapmoveイベントリスナーを削除します。
 
                    タイムアウト = setTimeout(関数() {
                        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                        var dd = 0;
                        (var x = 0; x < imgData.width; x += jiange) {
                            (var y = 0; y < imgData.height; y += jiange) {
                                var i = (y * imgData.width + x) * 4;
                                (imgData.data[i + 3] > 0)の場合{
                                    dd++
                                }
                            }
                        }
                        （dd / （imgData.width * imgData.height / （jiange * jiange））< 0.4）の場合{
                            キャンバス.className = "noOp";
                        }
                    }, トゥタイムズ)
                });
 
           
                キャンバスにイベントリスナーを追加します。
                canvas.addEventListener(tapend, 関数() {
                    キャンバスのtapmoveイベントリスナーを削除します。
 
                    タイムアウト = setTimeout(関数() {
                        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                        var dd = 0;
                        (var x = 0; x < imgData.width; x += jiange) {
                            (var y = 0; y < imgData.height; y += jiange) {
                                var i = (y * imgData.width + x) * 4;
                                (imgData.data[i + 3] > 0)の場合{
                                    dd++
                                }
                            }
                        }
 
                    }, トゥタイムズ)
 
                });
 
            
        }
    </スクリプト>
    <script type="text/javascript">
        ウィンドウ.setTimeout('CountDown()', 100);
        // 終わり
    </スクリプト>