Question

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

詹姆斯邦德枪管序列的结尾正是我所说的：http://www.youtube.com/watch?v=YNajzHjjYXQ 0:17左右，有一个圆圈显示黑色背景环绕的下一个场景。在接下来的几秒钟内，圆圈展开以覆盖整个屏幕，然后所有的黑色都消失了。我怎么能在HTML5和Javascript中做到这一点？

Answer 1

我可能会用帆布做，并在填充前剪一个圆圈。检查小提琴：http://jsfiddle.net/NgCVA/

作为演示，我在页面上放置了一个图像（你的游戏角色），然后将一个画布元素放在它上面：

<img src="http://zef.me/wp-content/uploads/2009/10/funny-dog-costume.jpg"/>
<canvas width="330" height="396"></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();

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

如何在黑色背景下进行曝光？

1 个答案: