Exemple d'effet de boule flottante de dessin sur toile

Récemment, j'ai prêté attention aux informations de la blockchain, je me suis promené et j'ai accidentellement vu l'effet de la page d'accueil de ce site Web. Lorsque la balle est proche, une ligne de détection y est connectée. La souris peut également créer une ligne de détection avec le ballon. Regardez Ce qui suit est réalisé à l'aide d'une toile.

Effet original

obtenir un effet

J'ai déjà eu beaucoup de contacts avec SVG et je sais que Canvas peut également obtenir des effets de rendu très puissants, mais il n'y a jamais eu de scénario d'utilisation qui m'a donné une chance de commencer. Cette fois, je prévois de l'essayer moi-même. .

De plus, la raison pour laquelle cela m'intéresse est que l'une est que j'aime les effets visuels, et l'autre est que j'aime la sensation de simuler le monde physique comme un moteur de jeu. Imaginez simplement que ces balles entreront en collision les unes avec les autres. , ou avoir une répulsion gravitationnelle entre eux, ou augmenter le facteur de gravité. Cette animation peut également ouvrir beaucoup d'imagination.

Voir le dépôt github ici.

Les instructions de dessin de Canvas sont très similaires aux instructions de SVG, très simples.

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

BeginPath démarre un chemin, arc dessine un cercle et le remplit de couleur.

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

De même,beginPath démarre un chemin, moveTo déplace le pinceau vers le point de départ, lineTo dessine la ligne jusqu'au point final et trace des traits.

Pour conserver le canevas en plein écran, réinitialisez simplement la largeur et la hauteur du canevas lors du chargement ou du redimensionnement de la fenêtre.

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

Les animations de base me permettent de démarrer.

Quatre étapes pour créer une animation :

1. Effacez le contenu du canevas, généralement en utilisant clearRect()
2. Enregistrer l'état du canevas
3. Dessiner du contenu
4. Réinitialiser l'état du canevas

Ce que j'ai fait est relativement simple, en utilisant uniquement 1 et 3, qui consiste à effacer constamment le canevas puis à le redessiner.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw() { cleanCanvas (); // dessine des éléments. window.requestAnimationFrame(draw);}

Trois sont disponibles :

1. window.setInterval() S'il n'y a pas du tout besoin d'interaction de l'utilisateur et juste un redessin constant, cela suffit.
2. window.setTimeout() Si vous souhaitez que les opérations utilisateur, telles que le clavier et la souris, affectent l'animation, vous pouvez utiliser ceci (je ne comprends pas, requestAnimationFrame n'est-il pas meilleur ?)
3. window.requestAnimationFrame() indique au navigateur quoi faire avant de redessiner la prochaine fois, c'est-à-dire votre propre opération de dessin personnalisée.

Cet exemple dans MDN est plutôt sympa. Il peut être déplacé, et ce qui suit n'est qu'une capture d'écran.

J'ai déjà vu du développement de moteur de jeu et j'ai consciemment créé une encapsulation orientée objet. Ce qui est utilisé ici est très simple.

La chose la plus fondamentale est que Vector représente un point/vecteur dans un espace à deux dimensions et que ses membres ne sont que x et y.

Sur cette base, Circle représente un cercle, member center : Vector représente le centre du cercle, radius : number représente le rayon, et speed : Vector représente la vitesse.

Ensuite, encapsulez simplement certaines fonctions membres pour votre propre usage.

TypeScript + Webpack + Webpack-dev-server n'est pas compliqué, référez-vous simplement au contenu suivant :

1. Webpack/Mise en route
2. Webpack/Dactylographié
3. Webpack/serveur de développement
4. serveur de développement webpack

De plus, j'ai également essayé npx, qui est utilisé pour exécuter des programmes exécutables npm. Dans le passé, webpack était installé globalement et vous pouviez simplement appeler webpack xx directement. Si vous installez webpack localement, vous devez passer par ./node_modules/. .bin/webpack Pour exécuter un webpack local, vous pouvez désormais npx webpack xxx.

Dans la configuration de devServer, j'ai ajouté hot: true pour activer la mise à jour à chaud. En conséquence, la page Web a demandé : [HMR] Le remplacement du module à chaud est désactivé.

J'ai trouvé que c'était un vieux piège. Lorsque j'ai besoin de l'appeler, ajoutez les paramètres de ligne de commande : webpack-dev-server --hot --inline.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.