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
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン