HTML旋转五角星探照灯,canvas探照灯效果clip()原创

var canvas = document.getElementById("canvas1");

var context = canvas.getContext("2d");

var img = new Image();

img.src = "http://www.jq22.com/img/cs/500x500-9.png";

function Ball(x, y, r, color) {

this.x = x;

this.y = y;

this.r = r;

this.color = color;

var speedX = 3;

var speedY = 4;

// 移动的方法

this.move = function() {

this.x += speedX;

this.y += speedY;

// 边界的判断

if ((this.x - this.r) <= -(r - x) || (this.x + this.r) >= canvas.width + (r - x)) {

speedX *= -1;

}

if ((this.y - this.r) <= -(r - y) || (this.y + this.r) >= canvas.height + (r - y)) {

speedY *= -1;

}

}

// 绘制的方法

this.draw = function() {

context.strokeStyle = this.color;

context.beginPath();

context.arc(this.x, this.y, this.r, 0, 2 * Math.PI);

context.closePath();

context.stroke();

}

}

// 创建一个小球

var ball = new Ball(10, 10, 100, "red");

img.onload = function() {

context.drawImage(img, 0, 0, canvas.width, canvas.height);

}

// 循环移动的事件

function cycleAnimate() {

// 保存当前画布的状态

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

// 小球开始移动

ball.move();

// 开始绘制整个过程

ball.draw();

// var animateId = window.requestAnimationFrame(cycleAnimate);

window.requestAnimationFrame(cycleAnimate);

context.save();

context.clip();

context.drawImage(img, 0, 0, canvas.width, canvas.height);

// 回复之前save()的状态

context.restore();

// 停止动画

// window.cancelAnimationFrame(animateId);

} // 循环结束的括号

cycleAnimate();