Canvas: An Example of the floating ball effect. canvas: An Example of the floating ball effect.

Canvas: An Example of the floating ball effect. canvas: An Example of the floating ball effect.

I recently followed the blockchain information and stumbled to see the results of this website homepage. A bunch of floating balls, when the ball is close, there will be a sensor line connection, the mouse can also generate a sensor line with the ball. I can see that canvas is used.

Original Effect

Effect

Previously, I had a lot of contact with svg, and canvas knew that it could also achieve very powerful rendering effects, but there was no chance for me to get started with usage scenarios. So I plan to work on it myself this time.

In addition, I am interested in this. I like visual effects, and I like the gaming engine that simulates the physical world. I think these balls will collide with each other, or there is a gravitation between each other, or a gravity factor is added. this animation can also open many brain holes.

For github repo, see here.

Canvas

Canvas drawing commands are similar to those in SVG, which is very simple.

Circle

ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

BeginPath starts a path. arc draws a circle and fills the color with fill.

Draw line

ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.stroke();

It is also the starting path of beginPath. moveTo moves the paint brush to the start point, lineTo draws the line to the end, and stroke strokes.

Canvas full screen

To keep the canvas full screen, you only need to reset the width and height of the canvas during window onload or onresize.

var canvas = document.getElementById("canvas");function resizeCanvas() {    canvas.width = window.innerWidth;    canvas.height = window.innerHeight;}window.onload = window.onresize = resizeCanvas;

Animation

Basic animations helps me get started.

Procedure

Perform the following four steps:

1. Clear the canvas content, usually using clearRect ()
2. Save canvas status
3. Draw content
4. Reset canvas status

I just used 1 and 3 to clear the canvas and re-paint it.

window.onload = function () {    resizeCanvas();    window.requestAnimationFrame(draw);};function cleanCanvas() {    ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw() {    cleanCanvas();    // draw stuffs.    window.requestAnimationFrame(draw);}

Control Functions

Three functions are available:

1. Window. setInterval (). If you do not need user interaction at all, you just need to re-paint it. This is enough.
2. Window. setTimeout () If you want to operate a user, such as a keyboard or mouse, to affect the animation, you can use this. (do not understand, not requestAnimationFrame ?)
3. Window. requestAnimationFrame () tells the browser what to do before the next re-painting, that is, you customize the painting operation.

The example in MDN is cool. CodePen. It can be moved. below is just one.

Data Structure

I have read a little about Game Engine Development and consciously encapsulate the object. It is very simple to use.

The most basic thing is that a Vector represents a point/Vector in a two-dimensional space, with only x, y members.

On this basis, Circle represents the Circle, member center: Vector represents the center, radius: number represents the radius, and speed: Vector represents the speed.

Then encapsulate some self-use member functions.

Development Environment

TypeScript + Webpack-dev-server is not complex. refer to the following content:

1. Webpack/Getting Started
2. Webpack/Typescript
3. Webpack/devServer
4. Webpack-dev-server

In addition, npx is also used to run npm executable programs. in the past, webpack was installed globally. You can directly call webpack xx. if you install webpack locally, you need to use. /node_modules /. bin/webpack to run the local webpack. Now you can run npx webpack xxx.

A trap

In the config of devServer, the "hot: true" option is added to enable Hot update. The result page prompts [HMR] hot Module Replacement is disabled.

This is an old pitfall. You need to add the command line parameter webpack-dev-server -- hot -- inline when calling it.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.