效果描述：
当鼠标移动到图片上方时，图片上放会出现星星，并且星星随即运动；当鼠标移开图像时，星星渐渐消失。
效果图如下：
canvas实现星星特效
主要实现代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/stars.js"></script>
</body>
</html>
main.js
var can;
var ctx;
var w;
var h;
// 女孩的图片
var girlPic = new Image();
// 星星图片
var starPic = new Image();
// 上次刷新时间
var lastTime;
//刷新时间间隔
var deltaTime;
var life = ;
var num = ;
var stars = [];
var switchy;
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 = ; i < num; i++) {
var obj = new starObj();
stars.push(obj);
stars[i].init();
}
lastTime = Date.now();
gameloop();
}
document.body.onload = init;
function drawBackground(){
ctx.fillstyle = "#393550";
ctx.fillRect(,,w,h);
}
function gameloop(){
// 循环调用函数,时间不确定
window.requestAnimFrame(gameloop);
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
// console.log(deltaTime);
drawBackground();
drawGirl();
drawStars();
aliveUpdate();
}
function drawGirl(){
ctx.drawImage(girlPic,,,,);
}
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;
// console.log(px);
if (px > && px < && py > && py < ) {
switchy = true;
}else{
switchy = false;
}
// console.log(switchy);
}
}
stars.js
// 星星类
var starObj = function(){
this.x ;
this.y ;
this.picNo;
this.timer;
this.xSpeed;
this.ySpeed;
}
// 初始化方法
starObj.prototype.init = function(){
this.x= + Math.random()*;
this.y= + Math.random()*;
this.xSpeed = Math.random()*-;
this.ySpeed = Math.random()*-;
this.picNo = Math.floor(Math.random()*);
this.timer=;
}
starObj.prototype.update = function(){
this.timer += deltaTime;
this.x += this.xSpeed * * deltaTime;
this.y += this.ySpeed * * deltaTime;
if (this.x < || this.x >) {
this.init();
return;
}
if (this.y < || this.y >) {
this.init();
return;
}
if (this.timer > ) {
this.picNo += ;
this.picNo %= ;
this.timer = ;
}
}
starObj.prototype.draw = function(){
ctx.save();
ctx.globalAlpha = life;
ctx.drawImage(starPic,*this.picNo,,,,this.x,this.y,,);
ctx.restore();
}
function drawStars(){
for (var i = ; i < num; i++) {
stars[i].draw();
stars[i].update();
}
}
function aliveUpdate(){
if (switchy) {
life += *deltaTime*;
if (life>) {
life = ;
}
}else{
life -= *deltaTime*;
if (life<) {
life = ;
}
}
}
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, / );
};
})();
这是小编在通过慕课学习视频时根据老师讲解敲的代码，供大家参考学习！
![web OS —— goowy.com[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)