Javascript画布：触摸动画框，仅查看边框

Question

我正在尝试用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);

Answer 1

您可以通过使用第二个画布来实现此效果，或者甚至只是将该框设置为位于画布上的普通<div>元素。否则，无法重新绘制画布。