1

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

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

4

1 回答 1

3

我可能会用画布来做，然后在填充之前剪一个圆圈。检查小提琴：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();

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

于 2012-04-12T20:40:52.947 回答