javascript - 如何在黑色背景下进行显示？

Question

我有一个基于 HTML5 的游戏，我想以某种方式揭示玩家的 Angular 色。

詹姆斯邦德枪管序列的结尾有点像我所说的:http://www.youtube.com/watch?v=YNajzHjjYXQ 0:17 左右，有一个圆圈显示下一个场景，周围是黑色背景。在接下来的几秒钟内，圆圈扩大到覆盖整个屏幕，然后所有的黑色都消失了。我如何在 HTML5 和 Javascript 中执行此操作？

Answer 1

我可能会用 Canvas 来做，并在填充之前剪一个圆圈。检查 fiddle :http://jsfiddle.net/NgCVA/

作为演示，我在页面上放置了一张图片(您的游戏 Angular 色)，然后在其上方绝对放置了一个 Canvas 元素:

<img src="http://zef.me/wp-content/uploads/2009/10/funny-dog-costume.jpg"/>
<canvas width="330" height="396"></canvas>​

然后您将在动画循环中反复用黑色填充整个 Canvas ，同时裁剪一个越来越大的圆圈:

var canvas = document.getElementsByTagName('canvas')[0],
    ctx = canvas.getContext('2d'),

    cx = canvas.width / 2, 
    cy = canvas.height / 2, 
    r = 10, 

    R_MAX = 400;

ctx.fillstyle = '#000';

function draw() {
    r += 1;

    ctx.clearRect(0, 0, canvas.width, canvas.height);    

    ctx.save();
        // Draw clipping area
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(canvas.width, 0);
        ctx.lineTo(canvas.width, canvas.height);
        ctx.lineTo(0, canvas.height);
        ctx.closePath();
        ctx.moveTo(cx + r, cy);
        ctx.arc(cx, cy, r, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.clip();

        // Fill everything not clipped
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();

    if(r < R_MAX) setTimeout(draw, 10);
}

draw();

请记住，这是非常简单的动画，您可能想要做一些更优雅的事情(例如，您自己的动画循环、缓动等等)。重要的部分是在 Canvas 上进行裁剪和填充的技术。