练习探照灯

<canvas id="canvas" width="800" height="500" style="border:1px solid #666;display:block;margin:0 auto">
    当前浏览器不支持canvas，请更换浏览器后再试。
</canvas>

var light = {x:400, y:250, radius:50, vx:Math.random()*5 + 10, vy:Math.random()*5 + 10}
    var img ;
    window.onload = function(){
        var canvas = document.getElementById(‘canvas‘);
        var context = canvas.getContext(‘2d‘);

        img = new Image();
        img.src = ‘fanfan.jpg‘;
        img.onload = function(){
            context.drawImage(img,0,0,560,560,150,0,500,500);
        }

        setInterval(function(){
            draw(context);
            update(canvas.width,canvas.height);
        },50);

    }

    function draw(context){
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.save();

        context.beginPath();
        context.fillStyle = ‘#000‘;
        context.fillRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        context.arc(light.x, light.y, light.radius, 0, 2*Math.PI);
        context.fillStyle = ‘#fff‘;
        context.fill();
        context.clip();

        context.drawImage(img,0,0,560,560,150,0,500,500);
        context.restore();
    }

    function update(canvasWidth,canvasHeight){
        light.x += light.vx;
        light.y += light.vy;

        // 小球左移碰壁时
        if(light.x - light.radius <= 0){
            light.vx = -light.vx;
            light.x = light.radius;
        }

        // 小球右移碰壁时
        if(light.x + light.radius >= canvasWidth){
            light.vx = -light.vx;
            light.x = canvasWidth - light.radius;
        }

        // 小球上移碰壁时
        if(light.y - light.radius <= 0){
            light.vy = -light.vy;
            light.y = light.radius;
        }

        // 小球下移碰壁时
        if(light.y + light.radius >= canvasHeight){
            light.vy = -light.vy;
            light.y = canvasHeight - light.radius;
        }
    }