android星星闪效果,H5使用canvas实现星星闪烁效果
html
star
JS
main.j遇新是直朋能到s
var can;
var ctx;
var w,h;
var girlPic = new Image();
var starPic = new Image();
var num = 60;
var stars = [];
var lastTime,deltaTime;
var switchy;
var life = 0;
function init(){
can = document.getElementById("canvas");
ctx = can.getContext("2d");
w = can.width;
h = can.height;
document.addEventListener("mousemove",mousemove,false);
girlPic.src = "img/girl.jpg";
starPic.src = "img/star.png";
for(var i=0;i
var obj = new starObj();
stars.push(obj);
stars[i].init();
}
lastTime = Date.now();
gameloop();
}
document.body.onload = init;
function gameloop(){
window.requestAnimationFrame(gameloop);
var now = Date.now();
deltaTime = now - lastTime;
lastTime = now;
drawBackground();
drawGril();
drawStars();
aliveUpdate();
}
function drawBackground(){
ctx.fillStyle ="#393550";
ctx.fillRect(0,0,w,h);
}
function drawGril(){
//drawImage(img,x,y,width,height)
ctx.drawImage(girlPic,100,150,600,300);
}
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;
//判断px py在范围内
if(px>100&&px<700&&py>150&&py<450){
switchy =true;
}
else{
switchy =false;
}
//console.log(switchy);
}
}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);
};
})();
stars.js
var starObj = function(){
this.x;
this.y;
this.picNo;
this.timer;
this.xSpd;
this.ySpd;
}
starObj.prototype.init = function(){
this.x = Math.random()*600+100;
this.y = Math.random()*300+150;
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.01;
this.y += this.ySpd*deltaTime*0.01;
//this.x 超过范围
if(this.x<100||this.x>693){
this.init();
return;
}
//this.y超出范围 重生
if(this.y<150||this.y>443){
this.init();
return;
}
this.timer +=deltaTime;
if(this.timer>60){
this.picNo += 1;
this.picNo %= 7;
this.timer = 0;
}
}
starObj.prototype.draw = function(){
// save()
ctx.save();
//globalAlpha 全局透明度
ctx.globalAlpha = life;
//drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
ctx.drawImage(starPic,this.picNo*7,0,7,7,this.x,this.y,7,7);
//restore()
ctx.restore();
}
function drawStars(){
for(var i = 0;i
stars[i].update();
stars[i].draw();
}
}
function aliveUpdate(){
if(switchy){ //in area
//show stars
life +=0.3*deltaTime*0.05;
if(life>1){
life = 1;
}
}else{ //out area
//hide stars
life -=0.3*deltaTime*0.05;
if(life<0){
life=0;
}效果图
素材图片
本文来源于网络:查看 >https://blog.csdn.net/u014041540/article/details/52194544
android星星闪效果,H5使用canvas实现星星闪烁效果相关推荐
- html5星星效果图,H5 canvas流星雨星星特效
/p> 一起来看流星雨 var context; var arr = new Array(); var starCount = 800; var rains = new Array(); var ...
- android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
- android 五彩纸屑动画,利用H5实现Canvas五彩纸屑飘落动画特效
特效描述:利用H5实现 Canvas 五彩纸屑飘落 动画特效.利用H5实现Canvas五彩纸屑飘落动画特效 代码结构 1. HTML代码 "use strict"; var _cr ...
- StarWars.Android 界面粉碎效果中的openGL操作解析
最近在学习openGL,就找了几个相关的开源项目,一边理解,一边记录~ 这篇文章要介绍的项目来自久负盛名的yalantis 阅读此文需要一点OpenGL基础,比如纹理坐标. 项目giuhub地址 首先 ...
- android 下拉窗帘,Android 窗帘(Curtain)效果二之波浪式动态扭曲效果
上一篇文章已经实现了如何把一张图片扭曲成波浪效果,那么这一篇文章我们介绍如何动态调整系数,去改变波浪图片的皱褶成度.我们自一次观察下图morning routine的效果: 仔细观察我们发现,当往右滑 ...
- java随机星星怎么闪_canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- Android 高级UI解密 (三) :Canvas裁剪 与 二维、三维Camera几何变换(图层Layer原理)
Android的绘图机制是核心内容之一,无论是什么样的功能最终都是以图像的形式呈现给用户.因此掌握Android的绘图技巧,有助于Android理解层次的提高,在面对产品经理提出的idea时也更有底气 ...
- Android 实现指南针效果
Android 实现指南针效果 前一段时间在做指南针,于是想偷偷懒.在网上直接找一个Demo.然后改改旧差不多了.可是看到的效果却和预期的差太多了,所以就不得不自己撸一个: 大致上会用到内容 自定义V ...
- Android 吸入动画效果详解(仿mac退出效果)
转载自:http://m.blog.csdn.net/blog/leehong2005/9127095 [转]Android 吸入动画效果详解 1,背景 吸入(Inhale)效果,最初我是在iOS上面 ...
- php开发h5游戏,H5的canvas实现贪吃蛇小游戏
这次给大家带来H5的canvas实现贪吃蛇小游戏,H5的canvas实现贪吃蛇小游戏注意事项有哪些,下面就是实战案例,一起来看一下. 本文介绍了H5 canvas实现贪吃蛇小游戏,分享给大家,具体如下 ...
最新文章
- 旅游景点人物进出系统[OC项目]
- [独家]网易遭遇****** 留下“装B”两字
- 苹果Apple Music正式登陆索尼PS5
- mysql命令行操作大全_mysql命令行操作大全 mysql命令行操作总结
- 人生第一个深入理解的DFS题 HDU 1016
- 2015蓝桥杯C++A:手链样式(圆排列和环排列)
- c 生成html的div,createElement动态创建HTML对象脚本代码
- 【转】VirtualDOM与diff(Vue实现).MarkDown
- python刷抖音浏览_Python 一键批量下载抖音无水印视频
- Centos无法卸载时处理办法
- estore简版商城
- vb 分类汇总方法_高中数学19种解题方法+易错知识分类大汇总!
- 平安智慧企业大规模离职_中国平安人事再变动,28年老将任汇川离职,影响几何...
- Linux系统中的磁盘格式
- 很努力了,为什么我还在原地踏步?
- js实现每次调用一个函数自动加1
- 怎么提高python编程水平_编程新手如何提高编程能力?
- 数据挖掘(python实现)—认识数据
- sql优化+索引优化+详解(存储过程+函数 创建千万的测试数据)
- 5款开发手机应用的傻瓜式APP开发工具
热门文章
- Google翻译接口调用
- nmap 扫描 STATE 显示closed
- PS 制作 图片放大镜效果 和 鼠标点击效果
- 知识图谱文献综述(第一章 知识表示与建模)
- matlab 中gradient()函数的用法
- 近期购书体验:当当相对最棒,卓越蜗牛,京东缺货
- rabbitmq中交换机类型direct和topic的区别
- idea 中部署 tomcat
- 编程将数字“翻译”成英文。例35706“翻译”成three-five-seven-zero-six。
- chm格式电子书另类反编译法:使用压缩软件7Z简单实现CHM电子书反编译 | 志文工作室