球动画设计HTML5,html5 canvas炫彩运动小球动画特效

特效描述：html5 canvas 炫彩运动小球动画特效。html5用canvas加面向对象制作的运动小球动画特效

代码结构

1. HTML代码

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

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

var maxWidth=canvas.width;

var maxHeight=canvas.height;

var colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]

//随机数

function random(min,max){

return Math.floor(Math.random()*(max-min)+min)

}

//构造函数

function Ball(){

this.a=true;

this.b=true;

this.r=random(10,30);

this.ballColor={color: colors[Math.floor(Math.random() * colors.length)]}

this.vx=random(30,maxWidth-30);

this.vy=random(30,maxHeight-30);

this.ispeed=random(1,10);

this.ispeed2=random(1,10);

}

// 面向对象

Ball.prototype.moveBall=function(){

context.beginPath();

if (this.a) {

this.vx += this.ispeed;

if (this.vx>=maxWidth-this.r) {

this.a = false;

}

} else {

this.vx -= this.ispeed;

if (this.vx <= this.r) {

this.a = true;

}

if (this.b) {

this.vy+= this.ispeed2;

if (this.vy >= maxHeight-this.r) {

this.b = false;

}

} else {

this.vy -= this.ispeed2;

if (this.vy <= this.r) {

this.b = true;

}

context.fillStyle=this.ballColor.color;

context.arc(this.vx,this.vy,this.r,0,Math.PI*2,false);

context.fill();

}

var Aball=[];

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

Aball[i]=new Ball();

}

setInterval(function(){

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

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

Aball[i].moveBall();

}

},30)

球动画设计HTML5,html5 canvas炫彩运动小球动画特效相关推荐

HTML5+CSS3小实例：炫彩爱心加载特效
HTML5+CSS3实现炫彩爱心加载特效,9根普通的线条,通过变换长度,即可打造一个动感炫彩的心形loading加载动画,变换过程伴随了模糊,更让这个loading动画更细腻.更富律动. 效果: 源码 ...
HTML5+CSS3小实例：炫彩的发光字特效
前言: 今天我们向大家精选了一款HTML5+CSS3文字特效,文字特效有超酷的动画类型,不多说,一起来看看. 描述: 这款文字特效既有倒影的效果,又有随机的颜色,看起来非常的炫酷.全文基于 HTML5 ...
Canvas炫酷3D线条动画背景
下载地址 Canvas炫酷3D线条动画背景,可以变色的颜色渐变网页动态背景特效. dd:
css3炫彩边框渐变色动画js特效
下载地址一款css3炫彩边框渐变色动画特效,炫彩的边框颜色渐变动画,让边框不再单调,生动有趣,可灵活使用在网页中 dd:
彩色点缀,canvas炫彩小球样式背景
canvas炫彩小球样式背景效果展示代码如下 1.css * {margin: 0;padding: 0; }.backCanvas canvas {display: block;margin: ...
Silverlight Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations) 正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Bl ...
html5 canvas爆炸,html5 canvas彩色爆炸的小球动画特效
特效描述:html5 canvas 彩色爆炸小球动画特效.html5 canvas特效,有中心向四周爆炸的彩色小球,有开始和暂停按钮代码结构 1. HTML代码开始运动停止运动 var can ...
附带视频源码不需任何js，仅html5做出超炫酷礼物盒动画
源码/视频评论后加前端学习群470593776 HTML5课题:炫酷纯css3盒子礼物惊喜~毫无js痕迹哟! 知识点:HTML5,CSS3,web前端,布局思维,逻辑思维,无javascript,动画 ...
HTML5 Canvas炫酷宇宙黑洞引力特效
black-hole.js是一款效果非常炫酷的模拟宇宙黑洞引力特效的 js插件.该插件基于 HTML5 canvas,使用WebGL. glfx.js和 numeric.js 共同制作完成.其效果是在 ...
android显示动画一直播放器,酷炫的Android交互动画和视觉效果：高仿音悦台播放页面...
新版的音悦台 APP 播放页面交互非常有意思,可以把播放器往下拖动,这个页面透明渐变,然后到底部可以左右拖动关闭播放器,然后点击视频列表有个页面弹出来的效果,十分炫酷,于是我自己动手实现了这个交互炫酷 ...

球动画设计HTML5,html5 canvas炫彩运动小球动画特效

球动画设计HTML5,html5 canvas炫彩运动小球动画特效相关推荐

最新文章

热门文章