1. ホーム
  2. Web制作
  3. html5

Canvas wave garlandのサンプルコード

2022-02-05 13:06:36

JSでのCanvasアニメーション

数日ブログを書いていなかったし、今日は遅くまで忙しいので、ウェーブリースの作り方を伝授します

<イグ


效果图如上所示为。

老矩先把代码给大家,新建一个文档(新建一个txt文本文档,把后缀改名为" .html)。
"),以记事本打开,把复制好的代码粘贴进去,并设计 ";,退出,双击或右键选择浏览器打开。

祝大家前端学习愉快,在后的日子中与君共勉。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Dokument</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', { Wert:0, beschreibbar:true });
		Object.defineProperty(this, 'y', { Wert:0, beschreibbar:true });
		Object.defineProperty(this, 'allBodies', { value:[], writable:true });
		Object.defineProperty(this, 'allBodiesLookup', { value:{}, writable:true }); // schnelle Id-Suche für Kinder
		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, 'color', { value:vo.colour, writable:true });
		Object.defineProperty(this, 'x', { Wert:0, beschreibbar:true });
		Object.defineProperty(this, 'y', { Wert:0, beschreibbar:true });
		Object.defineProperty(this, 'vx', { Wert:0, beschreibbar:true });
		Object.defineProperty(this, 'vy', { Wert:0, beschreibbar:true });
		Object.defineProperty(this, 'degrees', { value:vo.degrees, writable:true });
		Object.defineProperty(this, 'speedBase', { Wert:vo.speed, beschreibbar: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(Winkel);
		this.vy = this.orbitalRadius * Math.sin(Winkel);
		// Position aktualisieren
		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');
		Leinwand = createCanvas('Leinwand', Breite, Höhe);
		wrapper.appendChild(canvas);
		ctx = canvas.getContext('2d');
		setupEvents();
		resizeCanvas();

		/* Neues PlanetarySystem definieren und Werte setzen *		let system1 = new PlanetarySystem('pSys1');
		systems.push(system1);
		system1.x = Breite * .5;
		system1.y = Höhe * 0,5;
		system1.addBody({id:'sun', diameter:5, degrees:0, speed:0, color:'#FDFE1D', orbitalRadius:0, parentBody:null});
		for(let loop=30, i=0; i<loop; i+=1){
			system1.addBody({ id: 'ball'+i,
								Durchmesser: 5,
								Grad:		0,
								Geschwindigkeit: 2 + (loop * 0.15) - (i* 0.2),
								Farbe: '#FDFE1D',
								orbitalRadius: 7*(i+1),
								parentBody: 'Sonne'});
		}
	}
	
/* Methoden *	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++){
			systeme[i].x = Breite * .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