海洋动态效果图,HTML5/SVG海洋波浪动画运动模拟"/>
html海洋动态效果图,HTML5/SVG海洋波浪动画运动模拟
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
/**
* Constants
*/
const TWO_PI = Math.PI * 2;
/**
* Application Class
*/
class Application {
/**
* Application constructor
*/
constructor() {
this.canvas = document.getElementById("canvas");
this.context = this.canvas.getContext("2d");
this.width = this.canvas.width = window.innerWidth;
this.height = this.canvas.height = window.innerHeight;
this.center = {
x: this.width / 2,
y: this.height / 2
};
this.circleContainers = [];
//Resize listener for the canvas to fill browser window dynamically
window.addEventListener('resize', () => this.resizeCanvas(), false);
}
/**
* Simple resize function. Reinitializes everything on the canvas while changing the width/height
*/
resizeCanvas() {
this.width = this.canvas.width = window.innerWidth;
this.height = this.canvas.height = window.innerHeight;
this.center = {
x: this.width / 2,
y: this.height / 2
};
//Empty the previous container and fill it again with new CircleContainer objects
this.circleContainers = [];
this.initializeCircleContainers();
}
/**
* Create a number of CircleContainer objects based on the numberOfContainers variable
* @return void
*/
initializeCircleContainers() {
for (let x = 0; x < this.width + 100; x += 100) {
for (let y = 0; y < this.height + 100; y += 100) {
//Initialize a new instance of the CircleContainer class
let circleContainer = new CircleContainer(this.context, x, y);
//Let the CircleContainer initialize it's children
circleContainer.initializeCircles();
//Add the container to our array of CircleContainer objects
this.circleContainers.push(circleContainer);
}
}
}
/**
* Updates the application and every child of the application
* @return void
*/
update() {
for (let i = 0; i < this.circleContainers.length; i++) {
this.circleContainers[i].update();
}
}
/**
* Renders the application and every child of the application
* @return void
*/
render() {
//Clear the entire canvas every render
this.context.clearRect(0, 0, this.width, this.height);
//Trigger the render function on every child element
for (let i = 0; i < this.circleContainers.length; i++) {
this.circleContainers[i].render();
}
}
/**
* Update and render the application at least 60 times a second
* @return void
*/
loop() {
this.update();
this.render();
window.requestAnimationFrame(() => this.loop());
}
}
/**
* CircleContainer Class
*/
class CircleContainer {
/**
* CircleContainer constructor
* @param context - The context from the canvas object of the Application
* @param x
* @param y
*/
constructor(context, x, y) {
this.context = context;
this.position = {x, y};
this.numberOfCircles = 19;
this.circles = [];
this.baseRadius = 20;
this.bounceRadius = 150;
this.singleSlice = TWO_PI / this.numberOfCircles;
}
/**
* Create a number of Circle objects based on the numberOfCircles variable
* @return void
*/
initializeCircles() {
for (let i = 0; i < this.numberOfCircles; i++) {
this.circles.push(new Circle(this.position.x, this.position.y + Math.random(), this.baseRadius, this.bounceRadius, i * this.singleSlice));
}
}
/**
* Try to update the application at least 60 times a second
* @return void
*/
update() {
for (let i = 0; i < this.numberOfCircles; i++) {
this.circles[i].update(this.context);
}
}
/**
* Try to render the application at least 60 times a second
* @return void
*/
render() {
for (let i = 0; i < this.numberOfCircles; i++) {
this.circles[i].render(this.context);
}
}
}
/**
* Circle Class
*/
class Circle {
/**
* Circle constructor
* @param x - The horizontal position of this circle
* @param y - The vertical position of this circle
* @param baseRadius
* @param bounceRadius
* @param angleCircle
*/
constructor(x, y, baseRadius, bounceRadius, angleCircle) {
this.basePosition = {x, y};
this.position = {x, y};
this.speed = 0.01;
this.baseSize = 10;
this.size = 10;
this.angle = (x + y);
this.baseRadius = baseRadius;
this.bounceRadius = bounceRadius;
this.angleCircle = angleCircle;
}
/**
* Update the position of this object
* @return void
*/
update() {
this.position.x = this.basePosition.x + Math.cos(this.angleCircle) * (Math.sin(this.angle + this.angleCircle) * this.bounceRadius + this.baseRadius);
this.position.y = this.basePosition.y + Math.sin(this.angleCircle) * (Math.sin(this.angle + this.angleCircle) * this.bounceRadius + this.baseRadius);
this.size = Math.cos(this.angle) * 8 + this.baseSize;
this.angle += this.speed;
}
/**
* Renders this Circle object on the canvas
* @param context - The context from the canvas object of the Application
* @return void
*/
render(context) {
context.fillStyle = "hsl(195, 100%, "+this.size * 4+"%)";
context.beginPath();
context.arc(this.position.x, this.position.y, this.size, 0, TWO_PI);
context.fill();
}
}
/**
* Onload function is executed whenever the page is done loading, initializes the application
*/
window.onload = function () {
//Create a new instance of the application
const application = new Application();
//Initialize the CircleContainer objects
application.initializeCircleContainers();
//Start the initial loop function for the first time
application.loop();
};
更多推荐
html海洋动态效果图,HTML5/SVG海洋波浪动画运动模拟
发布评论