canvas实现星星闪烁特效

准备工作

获取canvas元素节点
获取画布工具
获取节点的宽高挂载图像
var girlPic = new Image(), starPic = new Image()
girlPic.src = 'src/girl.jpg’    starPic.src = 'src/star.png'创建方法
gameloop  //刷新canvas画布,循环做绘制背景,每隔一段时间来刷新canvas的内容
window.requestAnimFrame(gameloop)  实现持续动画效果

制作背景

对画布对象使用方法fillStyle, fillRect
方法挂载至函数gameloop

女孩图片挂载

创建Image对象 传递src路径
使用方法drawImage 挂载Image对象 x位置 y位置  宽  高
方法挂载至函数gameloop

制作很多星星

定义一个类并添加属性  x，y位置并使用Math.random使其位置随机
使用循环创建很多类并初始化
使用子类prototype向对象添加方法draw
将图片挂载至对象上使用drawImage方法ctx.drawImage(starPic
创建方法drawStars遍历每一个对象并使用添加的方法再添加到gameloop中

序列帧动画

使用Date.now返回的毫秒数 获取俩次回返的差值
初始化随机播放帧数和累计变量
序列帧图片每一帧为7
累计到变量上超过50，计算下一帧，并超过7那么回到第一帧，然后重新累计变量
ctx.drawImage(starPic, this.picNo * 7, 0, 7, 7, this.x, this.y,  7, 7)图像，图像上的x,y，截取图像大小，在画布上的坐标，在画布上的缩放大小

随机位移

创建x, y属性并随机一个速度
this.x = 初始化速度 1.5至-1.5 * 差距时间 * 0.02

重生判断

判断x超过屏幕外那么重新初始化此类init() 并return 结束这个类

监听鼠标

document.addEventListener("mousemove", mousemove, false)
获取鼠标当前位置，当在图片中时变量为false
监听变量 当为true创建另一个变量逐渐变为1最大为1，否则逐渐变小，最小为0
使用画布工具的globalAlpha控制星星的透明度,使用工具的save(), restore()方法使这个透明度只作用与星星

canvas实现星星闪烁特效相关推荐

html 流动效果,html5 canvas流动的海浪特效
特效描述:html5canvas 流动的海浪特效.html5 canvas流动的海浪特效代码结构 1. 引入JS 2. HTML代码 'use strict'; var gui = new dat. ...
php 让字体闪烁,js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...
html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html语言闪烁特效代码,css3 文字闪烁特效代码
今天给大家分享几个文字闪烁特效代码,纯css3代码实现,对于新手小伙伴值得拿来学习一下. 文字闪烁特效一通过改变透明度来实现文字的渐变闪烁,代码如下: 文字闪烁:闪烁效果 .main{ color: ...
html5 实现波浪效果图,利用HTML5实现Canvas流动的波浪特效
特效描述:利用HTML5实现 Canvas 流动的波浪特效.利用HTML5实现Canvas流动的波浪特效代码结构 1. 引入JS 2. HTML代码 'use strict'; var gui = ...
html银河特效编码,html5 canvas银河星系动画特效
特效描述:html5 canvas 银河星系动画特效.html5 canvas绘制闪闪发光移动的银河星系背景动画特效.(上传服务器正常演示,本地无法直接预览) 代码结构 1. 引入JS 2. HTML ...
jquery实现星星闪烁功能
实现星星闪烁功能,其实很简单,来看一下完整的代码实现吧! <style>*{margin:0;padding:0;}#box{width:700px;height:700px;backgr ...
html5波浪效果,html5 canvas粒子波浪动画特效
特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...
html5 运动轨迹绘画,html5 canvas行星运动轨迹动画特效
特效描述:html5 canvas 行星运动轨迹动画特效.html5运动轨迹,行星动画特效代码结构 1. 引入JS 2. HTML代码 Your browser doesn't support c ...
html 5抽奖特效,利用HTML5实现Canvas大转盘抽奖特效
特效描述:利用HTML5实现 Canvas 大转盘抽奖特效.利用HTML5实现Canvas大转盘抽奖特效代码结构 1. 引入JS 2. HTML代码当前浏览器版本过低,请使用其他浏览器尝试 va ...

canvas实现星星闪烁特效

canvas实现星星闪烁特效相关推荐

最新文章

热门文章