如图所示，当鼠标移上canvas区域的时候，显示星星闪烁的效果，星星本身还会有一个缓慢飘动的速度，当星星飘出canvas区域的时候，该星星消失，canvas区域的某个地方又会重生一个星星。

首先准备两张图片：

背景图：girl.jpg

girl.jpg

星星的序列帧图片：star.png

star.png

js库：commonFunctions.js

window.requestAnimFrame = (function() {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {

return window.setTimeout(callback, 1000 / 60);

};

})();

function calLength2(x1, y1, x2, y2) {

return Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);

}

function randomColor() {

var col = [0, 1, 2];

col[0] = Math.random() * 100 + 155;

col[0] = col[0].toFixed();

col[1] = Math.random() * 100 + 155;

col[1] = col[1].toFixed();

col[2] = Math.random() * 100 + 155;

col[2] = col[2].toFixed();

var num = Math.floor(Math.random() * 3);

col[num] = 0;

return "rgba(" + col[0] + "," + col[1] + "," + col[2] + ",";

}

function lerpAngle(a, b, t) {

var d = b - a;

if (d > Math.PI) d = d - 2 * Math.PI;

if (d < -Math.PI) d = d + 2 * Math.PI;

return a + d * t;

}

function inOboundary(arrX, arrY, l, r, t, b) { //在l r t b范围内的检测

return arrX > l && arrX < r && arrY > t && arrY < b;

}

function rgbColor(r, g, b) {

r = Math.round(r * 256);

g = Math.round(g * 256);

b = Math.round(b * 256);

return "rgba(" + r + "," + g + "," + b + ",1)";

}

function rgbNum(r, g, b) {

r = Math.round(r * 256);

g = Math.round(g * 256);

b = Math.round(b * 256);

return "rgba(" + r + "," + g + "," + b;

}

function rnd(m) {

var n = m || 1;

return Math.random() * n;

}

function rateRandom(m, n) {

var sum = 0;

for (var i = 1; i < (n - m); i++) {

sum += i;

}

var ran = Math.random() * sum;

for (var i = 1; i < (n - m); i++) {

ran -= i;

if (ran < 0) {

return i - 1 + m;

}

}

}

function distance(x1, y1, x2, y2, l) {

var x = Math.abs(x1 - x2);

var y = Math.abs(y1 - y2);

if (x < l && y < l) {

return true;

}

return false;

}

function AABBbox(object1, w1, h1, object2, w2, h2, overlap) {

A1 = object1.x + overlap;

B1 = object1.x + w1 - overlap;

C1 = object1.y + overlap;

D1 = object1.y + h1 - overlap;

A2 = object2.x + overlap;

B2 = object2.x + w2 - overlap;

C2 = object2.y + overlap;

D2 = object2.y + h2 - overlap;

if (A1 > B2 || B1 < A2 || C1 > D2 || D1 < C2) return false;

else return true;

}

function dis2(x, y, x0, y0) {

var dx = x - x0;

var dy = y - y0;

return dx * dx + dy * dy;

}

function rndi2(m, n) {

var a = Math.random() * (n - m) + m;

return Math.floor(a);

}

项目主文件：index.html

star girl

var can

var ctx

var w

var h

var girlPic=new Image()

var starPic=new Image()

var starNum=60;

var stars=[];

var lastTime;

var deltaTime;

var switchy=false;

var life=0;

//循环绘制

function gameloop(){

window.requestAnimFrame(gameloop)

var now=Date.now()

deltaTime=now-lastTime

lastTime=now;

drawBackground()

drawGirl()

drawStars()

aliveUpdate()

}

//绘制背景和女孩图片

function drawBackground(){

ctx.fillStyle="#393550"

ctx.fillRect(0,0,w,h)

}

function drawGirl(){

//drawImage(img,x,y)

ctx.drawImage(girlPic,100,150,600,300)

}

// 绘制星星序列帧图片

var starObj=function(){

this.x;

this.y;

this.picNo;

this.timer;

this.xSpd;

this.ySpd;

}

starObj.prototype.init = function() {

this.x=100+Math.random()*600;

this.y=150+Math.random()*300;

this.picNo=Math.floor(Math.random()*7);

this.timer=0;

this.xSpd=Math.random()*3-1.5

this.ySpd=Math.random()*3-1.5

};

starObj.prototype.update=function(){

this.x+=this.xSpd*deltaTime*0.002;

this.y+=this.ySpd*deltaTime*0.002;

if(this.x<100||this.x>693){

this.init();

return;

}

if(this.y<150||this.y>443){

this.init();

return;

}

this.timer+=deltaTime;

if(this.timer>100){

this.picNo+=1;

this.picNo%=7;

this.timer = 0;

}

}

starObj.prototype.draw = function() {

// globalAlpha全局透明度

ctx.save()

ctx.globalAlpha=life

ctx.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7);

ctx.restore()

};

//绘制星星

function drawStars(){

for (var i = 0; i < starNum; i++) {

stars[i].update()

stars[i].draw()

}

}

// 鼠标移动事件

function mousemove(e){

if (e.offsetX||e.layerX) {

var px=e.offsetX==undefined?e.layerX:e.offsetX;

var py=e.offsetY==undefined?e.layerY:e.offsetY;

if (px>100&&px<700&&py>150&&py<450){

switchy=true

}else{

switchy=false

}

}

}

//控制星星显示

function aliveUpdate(){

if(switchy){

// show Star

life+=0.03*deltaTime*0.05

if (life>1) {

life=1

}

}else{

life-=0.03*deltaTime*0.05

if (life<0) {

life=0

}

// hide Star

}

}

function init(){

can=document.getElementById("canvas")

ctx=can.getContext('2d')

w=can.width;

h=can.height;

document.addEventListener('mousemove',mousemove,false)

girlPic.src="src/girl.jpg"

starPic.src="src/star.png"

//星星的位置初始化

for (var i = 0; i < starNum; i++) {

var obj=new starObj();

stars.push(obj)

stars[i].init()

}

lastTime=Date.now()

gameloop()

}

init()

文件目录如下：

image.png