0

HTML5で簡単なアニメーションを作ろうとしています。タッチスクリーンデバイスを介して、以下のリンクをご覧ください。

https://dl.dropbox.com/u/41627/wipe.html

問題は次のとおりです。ユーザーが画面に触れるたびに、指の周りにボックスが描かれ、小さいものから大きいものへとアニメーション化されます。最も外側の境界だけを表示し、残りは表示しないようにします。キャンバスの残りの状態を保持したいので、キャンバスをクリアしたくありません。

問題を説明するための画像: 初期画面 ボックスを描画しようとしています 私のコードは次のとおりです。

    function init() {
        var canvas = document.getElementById('c');
        var ctx = canvas.getContext('2d');

        var img = document.createElement('IMG');

        img.onload = function () {
            ctx.beginPath();
            ctx.drawImage(img, 0, 0);
            ctx.closePath();    
            ctx.globalCompositeOperation = 'destination-out';    
        }

        img.src = "https://dl.dropbox.com/u/41627/6.jpg";

        function drawPoint(pointX,pointY){
            var grd = ctx.createRadialGradient(pointX, pointY, 0, pointX, pointY, 30);
            grd.addColorStop(0, "rgba(255,255,255,.6)"); 
            grd.addColorStop(1, "transparent"); 
            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.arc(pointX,pointY,50,0,Math.PI*2,true);
            ctx.fill();
            ctx.closePath();
        }
        var a = 0;
        var b = 0;
        function boxAround(pointX,pointY, a, b) {
            ctx.globalCompositeOperation = 'source-over'; 
            ctx.strokeStyle = "black";
            ctx.strokeRect(pointX-a, pointY-b, (2*a), (2*b));
            ctx.globalCompositeOperation = 'destination-out';  
            if(a < 100) {
                setTimeout(function() {
                    boxAround(pointX,pointY, a+5, b+5);
                }, 20); 
            }

        }

        canvas.addEventListener('touchstart',function(e){
            drawPoint(e.touches[0].screenX,e.touches[0].screenY);
            boxAround(e.touches[0].screenX,e.touches[0].screenY,0 , 0);

        },false);

        canvas.addEventListener('touchmove',function(e){
            e.preventDefault();
            drawPoint(e.touches[0].screenX,e.touches[0].screenY);
        },false);
4

1 に答える 1

0

この効果は、2 番目のキャンバスを使用するか、ボックスを<div>キャンバス上に配置された単純な要素にすることで実現できます。そうしないと、キャンバスを再描画することを回避する方法はありません。

于 2013-01-28T20:07:28.623 に答える