Depuis que j'ai commencé à travailler, j'ai écrit sur vue, React, les règles régulières, les algorithmes, les petits programmes, etc., mais je n'ai jamais écrit sur Canvas, parce que je ne sais vraiment pas comment faire !
En 2018, je me suis fixé un petit objectif : apprendre le canevas, et obtenir l'effet d'utiliser le canevas pour réaliser certaines animations qui ne sont pas faciles à réaliser avec CSS3.
Cet article est le premier gain de l'apprentissage de Canvas.La première démonstration que beaucoup de gens font lors de l'apprentissage de Canvas est d'implémenter une horloge, bien sûr, j'en ai également implémenté une, mais au lieu d'en parler, je vais parler d'une méthode plus intéressante et plus simple. un. des trucs.
Maintenez la souris enfoncée pour tracer la trajectoire besoinSur un canevas, il n'y a rien sur le canevas dans l'état initial. Maintenant, je souhaite ajouter quelques événements de souris au canevas et utiliser la souris pour écrire sur le canevas. L'effet spécifique est de déplacer la souris vers n'importe quel point du canevas, puis de maintenir la souris enfoncée, de déplacer la position de la souris et vous pouvez commencer à écrire !
principeAnalysons brièvement l'idée. Tout d'abord, nous avons besoin d'un canevas, puis calculons la position de la souris sur le canevas, lions l'événement onmousedown et onmousemove à la souris, et dessinons le chemin pendant le mouvement. le dessin se termine.
Bien que cette idée soit très simple, certaines parties nécessitent quelques astuces pour être mises en œuvre.
1. Un fichier html est requis, contenant des éléments de canevas.
Il s'agit d'une toile d'une largeur de 800 et d'une hauteur de 400. Pourquoi n'as-tu pas écrit px ? Oh, je ne comprends pas encore, c'est recommandé par le document canevas.
<!doctype html><html class=no-js lang=zh> <head> <meta charset=utf-8> <meta http-equiv=x-ua-compatible content=ie=edge> <title>apprentissage sur toile< /title> <meta name=description content=> <meta name=viewport content=width=device-width, initial-scale=1> <link rel=manifest href=site.webmanifest> <link rel=apple-touch-icon href=icon.png> <link rel=stylesheet href=css/main.css> </head> <body> <canvas id=theCanvas width=800 height =400></canvas> <script src=js/main.js></script> </body></html>
2. Déterminez si l'environnement actuel prend en charge le canevas.
Dans main.js, nous écrivons une fonction auto-exécutable. Voici l'extrait de code pour le jugement de compatibilité. Le corps principal du code sera au cœur des exigences d'implémentation.
(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { //Incompatible avec le canevas return false } else { //Corps du code}})()3. Obtenez l'objet 2D.
laissez contexte = theCanvas.getContext('2d')4. Obtenez les coordonnées de la souris actuelle par rapport au canevas.
Pourquoi devons-nous obtenir cette coordonnée ? Étant donné que la souris obtient par défaut les coordonnées relatives de la fenêtre actuelle et que le canevas peut être situé n'importe où sur la page, des calculs sont nécessaires pour obtenir les coordonnées réelles de la souris.
L'obtention des coordonnées réelles de la souris par rapport au canevas est encapsulée dans une fonction. Si vous vous sentez abstrait, vous pouvez faire un dessin sur un papier brouillon pour comprendre pourquoi cette opération est nécessaire.
Généralement, ce serait x - rect.left et y - rect.top. Mais pourquoi est-ce réellement x - rect.left * (canvas.width/rect.width) ?
canvas.width/rect.width signifie déterminer le comportement de mise à l'échelle dans le canevas et trouver le multiple de mise à l'échelle.
const windowToCanvas = (canvas, x, y) => { //Obtenir quelques propriétés de la fenêtre de distance des éléments de canevas, expliquées sur MDN let rect = canvas.getBoundingClientRect() //Les paramètres x et y sont transmis respectivement depuis la souris distance les coordonnées de la fenêtre, puis soustrayez la distance entre le canevas et la gauche et le haut de la fenêtre. return { x : x - rect.left * (canvas.width/rect.width), y : y - rect.top * (canvas.height/rect.height) }}5. Avec la fonction outil de l'étape 4, nous pouvons ajouter des événements de souris au canevas !
Liez d’abord l’événement onmousedown à la souris et utilisez moveTo pour dessiner le point de départ des coordonnées.
theCanvas.onmousedown = function(e) { //Obtient les coordonnées du point où la souris est enfoncée par rapport au canevas. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //Affectation de déstructuration de es6 let { x, y } = ele //Le point de départ du dessin. contexte.moveTo(x, y)}6. Lorsque vous déplacez la souris, il n'y a pas d'événement d'appui long sur la souris, comment le surveiller ?
La petite astuce utilisée ici consiste à exécuter un événement onmousemove (mouvement de la souris) à l'intérieur de onmousedown, afin que la souris puisse être surveillée et déplacée.
theCanvas.onmousedown = function(e) { //Obtient les coordonnées du point où la souris est enfoncée par rapport au canevas. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //Affectation de déstructuration de es6 let { x, y } = ele //Le point de départ du dessin. context.moveTo(x, y) //Événement de déplacement de la souris theCanvas.onmousemove = (e) => { //Obtient la nouvelle position des coordonnées lors du déplacement, utilisez lineTo pour enregistrer les coordonnées actuelles, puis tracez pour dessiner le point précédent vers le chemin du point actuel let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.stroke() }}7. Lorsque la souris est relâchée, le chemin ne sera plus tracé.
Existe-t-il un moyen d'empêcher les deux événements surveillés ci-dessus dans l'événement onmouseup ? Il existe de nombreuses méthodes. Définir onmousedown et onmousemove sur null en est une. isAllowDrawLine est défini sur une valeur booléenne pour contrôler si la fonction est exécutée. Pour le code spécifique, veuillez consulter le code source complet ci-dessous.
Code sourceIl est divisé en 3 fichiers, index.html, main.js et utils.js. La syntaxe d'es6 est utilisée ici. J'ai utilisé parcle pour configurer l'environnement de développement, il n'y aura donc aucune erreur si vous copiez le code directement. , lors de l'exécution. Si une erreur se produit et que le navigateur ne peut pas être mis à niveau, vous pouvez modifier la syntaxe es6 en es5.
1.index.html
Cela a été montré ci-dessus et ne sera plus répété.
2.main.js
import { windowToCanvas } from './utils'(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { let context = theCanvas.getContext ('2d') let isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele context.moveTo(x, y) theCanvas.onmousemove = (e) => { if (isAllowDrawLine) { let ele = windowToCanvas(theCanvas , e.clientX, e.clientY) let { x, y } = ele context.lineTo(x, y) context.Stroke() } } } theCanvas.onmouseup = function() { isAllowDrawLine = false } }})()3.utils.js
/** Récupère les coordonnées de la souris sur le canevas* */const windowToCanvas = (canvas, x, y) => { let rect = canvas.getBoundingClientRect() return { x: x - rect.left * (canvas.width /rect .width), y : y - rect.top * (canvas.height/rect.height) }}export { windowToCanvas} RésumerIl y a un malentendu ici : j'utilise l'objet Canvas pour lier l'événement theCanvas.onmouseup. En fait, Canvas ne peut pas lier les événements. Ce qui est réellement lié, c'est le document et la fenêtre. Mais comme le navigateur le jugera automatiquement pour vous et se chargera du traitement des événements, vous n'avez aucune raison de vous inquiéter.
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.