前端开发的动画实例_canvas动画

前端开发的动画实例|前端开发者|h5动画制作 web前端开发

当速度超过一定值的时候,判断dx<1会失效
从而达到了一个这个莫名其妙的动画。
于是,你可以修改if(dx<1 || dx > 300)这个判断语句。。。
后来我干掉了dx<1 就让所有点都穿过去,于是,一个动画又产生了
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>前端开发的动画实例</title>
</head>
<style>
body{
background:black;
overflow:hidden;
}
</style>
<body>
<script>
functiongetRandom(min,max){
returnMath.floor(Math.random() * (max-min) +min);
}
functionCanvas(){
this.pos= [];
this.numMax=768;
this.width = window.innerWidth;
this.height = window.innerHeight;
this.rx=this.width /2;
this.ry=this.height /2;
this.cxt;
this.v=1.25;//点的速度
this.dcolor=2;
}
// 创建节点、设置属性、获取对象
Canvas.prototype.createEle=function(){
varele=document.createElement(“canvas”);
ele.id =”canvas”;
ele.value =”sorry,your browser can not support canvas!”;
ele.width =this.width;
ele.height =this.height;
this.cxt=ele.getContext(‘2d’);
document.body.appendChild(ele);
}
Canvas.prototype.setCircle=function(){
varcolor,flag;
for (vari=0;i<this.numMax;i++) {
varr= ((i/128) +1) *40;//距离圆心初始半径,一共6层
varrotate= (i%128) *2.8125* (Math.PI/180);//一层128个,夹角2.8125
flag=i/128;
if (0<=flag&&flag<1.0) {
color=’rgb(255,0,’+ (i%128) *canvas.dcolor+’)’;
}elseif (1.0<=flag&&flag<2.0) {
color=’rgb(‘+ (255- (i%128) *canvas.dcolor) +’,0,255)’;
}elseif (2.0<=flag&&flag<3) {
color=’rgb(0,’+ (i%128) *canvas.dcolor+’,255)’;
}elseif (3<=flag&&flag<4) {
color=’rgb(0,255,’+ (255- (i%128) *canvas.dcolor) +’)’;
}elseif (4<=flag&&flag<5) {
color=’rgb(‘+ (i%128) *canvas.dcolor+’,255,0)’;
}elseif (5<=flag&&flag<6) {
color=’rgb(255,’+ (255- (i%128) *canvas.dcolor) +’,0)’;
}
this.pos[i] ={
r_max: 240, //6层间隔40,最大240
rotate: rotate, //所在点的相对角度
x: r * Math.cos(rotate) + this.width / 2,
y: r * Math.sin(rotate) + this.height / 2,
color: color,
}
}
}
Canvas.prototype.draw=function(x,y,r,color){
this.cxt.save();
this.cxt.beginPath();
this.cxt.fillStyle=color;
this.cxt.arc(x,y,r,0,Math.PI*2,true);
this.cxt.fill();
this.cxt.restore();
}
Canvas.prototype.animate=function(){
vardx;
canvas.cxt.clearRect(0,0,canvas.width,canvas.height);
for (vari=0;i<canvas.pos.length -1;i++) {
dx=Math.sqrt(Math.pow(canvas.ry-canvas.pos[i].y,2) +Math.pow(canvas.rx-canvas.pos[i].x,2));
if (dx>300) {
// 重置位置
canvas.pos[i].x =canvas.pos[i].r_max*Math.cos(canvas.pos[i].rotate) +canvas.width /2;
canvas.pos[i].y =canvas.pos[i].r_max*Math.sin(canvas.pos[i].rotate) +canvas.height /2;
}
//速度
canvas.pos[i].vx=-canvas.v*Math.cos(canvas.pos[i].rotate);
canvas.pos[i].vy=-canvas.v*Math.sin(canvas.pos[i].rotate);
// 移动
canvas.pos[i].x +=canvas.pos[i].vx;
canvas.pos[i].y +=canvas.pos[i].vy;
// 大小渐变
canvas.pos[i].r=Math.sqrt(Math.pow(canvas.ry-canvas.pos[i].y,2) +Math.pow(canvas.rx-canvas.pos[
i].x,2)) /80;
canvas.draw(canvas.pos[i].x,canvas.pos[i].y,canvas.pos[i].r,canvas.pos[i].color);
}
window.requestAnimationFrame(canvas.animate);
}
Canvas.prototype.changeV=function(){
varcount=1;
setInterval(function(){
canvas.v=1.25*Math.pow(2,count);
if (count++>3) {
count=1;
}
},5000);
}
varcanvas=newCanvas();
canvas.createEle();
canvas.setCircle();
canvas.animate();
canvas.changeV();
</script>
</body>
</html>

|前端开发者|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发的动画实例_canvas动画》
» 本文链接地址:https://www.rokub.com/2860.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!