我要评论js中的canvas动画
几天没写博客了，今天又忙到很晚，教大家做一个波浪花环吧
效果图如上所示：
老规矩先把代码给大家，新建一个html文档(新建一个txt文本文档，把后缀名改为“ .html
”),以记事本打开，把复制好的代码粘贴进去，“ 保存 ”，退出，双击或右键选择浏览器打开。
祝大家前端学习愉快，在今后的日子中与君共勉
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style>
body {
background: #111;
padding:0;
margin:0;
overflow:hidden;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
<script>
(function(){
'use strict';
let wrapper, canvas, ctx, width, height,
tau=math.pi*2, pi180=math.pi/180,
systems=[];
/* planetarysystem */
let planetarysystem = function(id='psys'){
object.defineproperty(this, 'id', { value:id, writable:true} );
object.defineproperty(this, 'x', { value:0, writable:true });
object.defineproperty(this, 'y', { value:0, writable:true });
object.defineproperty(this, 'allbodies', { value:[], writable:true });
object.defineproperty(this, 'allbodieslookup', { value:{}, writable:true }); // fast id lookup for children
object.defineproperty(this, 'numbodies', { value:0, writable:true });
}
planetarysystem.prototype.addbody = function(vo) {
vo.parentsystem = this;
vo.parentbody = vo.parentbody === null ? this : this.allbodieslookup[vo.parentbody];
let body = new planetarybody(vo);
body.update();
this.allbodies.push(body);
this.allbodieslookup[vo.id] = body;
this.numbodies += 1;
}
planetarysystem.prototype.setspeedfactor = function(value){
let body;
for(let i=0; i<this.numbodies; i++){
body = this.allbodies[i];
body.setspeedfactor(value);
}
}
planetarysystem.prototype.update = function(){
let body;
for(let i=0; i<this.numbodies; i++){
body = this.allbodies[i];
body.update();
}
}
/* planetarybody */
let planetarybody = function(vo){
object.defineproperty(this, 'id', { value:vo.id, writable:true} );
object.defineproperty(this, 'diameter', { value:vo.diameter, writable:true });
object.defineproperty(this, 'colour', { value:vo.colour, writable:true });
object.defineproperty(this, 'x', { value:0, writable:true });
object.defineproperty(this, 'y', { value:0, writable:true });
object.defineproperty(this, 'vx', { value:0, writable:true });
object.defineproperty(this, 'vy', { value:0, writable:true });
object.defineproperty(this, 'degrees', { value:vo.degrees, writable:true });
object.defineproperty(this, 'speedbase', { value:vo.speed, writable:true });
object.defineproperty(this, 'speed', { value:vo.speed , writable:true });
object.defineproperty(this, 'orbitalradius', { value:vo.orbitalradius, writable:true });
object.defineproperty(this, 'parentsystem', { value:vo.parentsystem, writable:true });
object.defineproperty(this, 'parentbody', { value:vo.parentbody, writable:true });
return this;
}
planetarybody.prototype.update = function(){
let angle = this.degrees * pi180;
this.degrees += this.speed;
this.vx = this.orbitalradius * math.cos(angle);
this.vy = this.orbitalradius * math.sin(angle);
// update position
if(this.parentbody != null){
this.x = this.vx + this.parentbody.x;
this.y = this.vy + this.parentbody.y;
}
}
/* init() */
function init(){
wrapper = document.queryselector('#wrapper');
canvas = createcanvas('canvas', width, height);
wrapper.appendchild(canvas);
ctx = canvas.getcontext('2d');
setupevents();
resizecanvas();
/* define new planetarysystem and set values */
let system1 = new planetarysystem('psys1');
systems.push(system1);
system1.x = width * .5;
system1.y = height * .5;
system1.addbody({id:'sun', diameter:5, degrees:0, speed:0, colour:'#fdfe1d', orbitalradius:0, parentbody:null});
for(let loop=30, i=0; i<loop; i+=1){
system1.addbody({ id: 'ball'+i,
diameter: 5,
degrees: 0,
speed: 2 + (loop * 0.15) - (i* 0.2),
colour: '#fdfe1d',
orbitalradius: 7*(i+1),
parentbody: 'sun'});
}
}
/* methods */
function createcanvas(id, w, h){
let tcanvas = document.createelement('canvas');
tcanvas.width = w;
tcanvas.height = h;
tcanvas.id = id;
return tcanvas;
}
function setupevents(){
window.onresize = resizecanvas;
}
function resizecanvas(){
let rect = wrapper.getboundingclientrect();
width = window.innerwidth;
height = window.innerheight - rect.top -2;
canvas.width = width;
canvas.height = height;
for(let i=0; i<systems.length; i++){
systems[i].x = width * .5;
systems[i].y = height * .5;
}
}
function update(){
for(let loop=systems.length, i=0; i<loop; i++){
systems[i].update();
}
}
function draw(){
let system;
let prev = null;
for(let i=0; i<systems.length; i++){
system = systems[i];
let planetarybody;
for(let loop=system.numbodies, j=1; j<loop; j+=1) {
planetarybody = system.allbodies[j];
ctx.beginpath();
ctx.arc(planetarybody.x, planetarybody.y, planetarybody.diameter, 0, tau, false);
ctx.fillstyle = planetarybody.colour;
ctx.fill();
if(j>1){
ctx.strokestyle = planetarybody.colour;
ctx.linewidth = 2;
ctx.beginpath();
ctx.moveto(planetarybody.x, planetarybody.y);
ctx.lineto(prev.x, prev.y);
ctx.stroke();
}
prev = {x:planetarybody.x, y:planetarybody.y};
}
}
}
function animate(){
ctx.fillstyle = 'rgba(0,0,0, .05)';
ctx.fillrect(0, 0, width, height);
update();
draw();
requestanimationframe(animate);
}
init();
animate();
}());
</script>
</html>
到此这篇关于canvas波浪花环的示例代码的文章就介绍到这了,更多相关canvas 波浪花环内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论