简单的实现探照灯的效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>探照灯的简单效果</title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
    
        var context = canvas.getContext('2d');
        
        
        //准备这个对象
        //创建显示区域的构造函数
        function Ball(x, y, r, color, speedX, speedY) {
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = color;
            this.speedX = speedX;
            this.speedY = speedY;
            this.draw = function() {
                context.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                context.fillStyle = this.color;
                context.fill();
            }

            this.move = function() {
                this.x = this.speedX + this.x;
        //让显示区域不要出边界
                if((this.x - this.r <= 0) || (this.x + this.r > canvas.width)) {
                    this.speedX = this.speedX * (-1);
                }

                this.y = this.speedY + this.y;

                if((this.y - this.r <= 0) || (this.y + this.r > canvas.height)) {
                    this.speedY = this.speedY * (-1);
                }
            }

        }

        var img = new Image();
        img.src ='img/1.jpg';
        img.onload = function(){
            context.drawImage(img, 0, 0, canvas.width, canvas.height);
        }
        var ball = new Ball(100, 100, 60, 'red', 5, 3);
        
        function animation (){
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            context.save();
            context.beginPath();
            ball.move();
            ball.draw();
            //这个和计时器一样的效果
            requestAnimationFrame(animation);
            //将图片进行剪切
            context.clip();
            context.drawImage(img, 0, 0, canvas.width, canvas.height);
            //将画布进行恢复
            context.restore();
        }
        animation();
        
        
        
    </script>
</html>
初学canvas 的练练手不错简单的模拟下探照灯的效果