interface Web
Tutoriel H5
Comment utiliser Canvas pour tracer une trajectoire en maintenant la souris enfoncée et en la déplaçant
Comment utiliser Canvas pour tracer une trajectoire en maintenant la souris enfoncée et en la déplaçant
Cet article présente principalement l'exemple de code pour utiliser Canvas pour tracer une trajectoire en maintenant la souris enfoncée et en la déplaçant. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.
Résumé
Depuis que j'ai commencé à travailler, j'ai écrit sur la vue, la réaction, la régularité, les algorithmes, les petits programmes, etc., mais je n'ai jamais écrit sur le canevas, parce que je ne sais vraiment pas comment faire !
En 2018, fixez-vous un petit objectif : apprendre le canevas, et l'effet obtenu est de pouvoir 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 lorsqu'ils apprennent Canvas est d'implémenter une "horloge". Bien sûr, j'en ai aussi implémenté une, mais au lieu d'en parler, j'en ai mis une. j'en parlerai. Une chose plus intéressante et plus simple.
Maintenez la souris enfoncée pour dessiner la piste
Exigences
Sur une toile en toile, l'état initial le canevas n'a rien Non, maintenant, je veux ajouter des é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 !
Principe
Analysons brièvement l'idée. Tout d'abord, nous avons besoin d'un canevas, puis calculons la position de la souris dessus. le canevas. Liez l'événement onmousedown et onmousemove à la souris et tracez le chemin pendant le mouvement. Lorsque la souris est relâchée, 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>canvas学习</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. Ce qui suit est l'extrait de code pour le jugement de compatibilité. Le « corps du code » sera au cœur des exigences d'implémentation.
(function() {
let theCanvas = document.querySelector('#theCanvas')
if (!theCanvas || !theCanvas.getContext) {
//不兼容canvas
return false
} else {
//代码主体
}
})()3. Récupérez l'objet 2D.
let context = theCanvas.getContext('2d')
4. Obtenez les coordonnées de la souris actuelle par rapport au canevas.
Pourquoi avons-nous besoin d'obtenir ces coordonnées ? É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.
Encapsule les coordonnées réelles de la souris par rapport au canevas dans une fonction. Si vous vous sentez abstrait, vous pouvez dessiner une image sur un papier brouillon pour comprendre pourquoi cette opération est nécessaire.
Normalement, cela peut être 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) => {
//获取canvas元素距离窗口的一些属性，MDN上有解释
let rect = canvas.getBoundingClientRect()
//x和y参数分别传入的是鼠标距离窗口的坐标，然后减去canvas距离窗口左边和顶部的距离。
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) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
}6. Lorsque vous déplacez la souris, il n'y a pas d'événement d'appui long de 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 vous puissiez surveiller la pression et le déplacement de la souris.
theCanvas.onmousedown = function(e) {
//获得鼠标按下的点相对canvas的坐标。
let ele = windowToCanvas(theCanvas, e.clientX, e.clientY)
//es6的解构赋值
let { x, y } = ele
//绘制起点。
context.moveTo(x, y)
//鼠标移动事件
theCanvas.onmousemove = (e) => {
//移动时获取新的坐标位置，用lineTo记录当前的坐标，然后stroke绘制上一个点到当前点的路径
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. J'ai utilisé "switch" ici. 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.
Le code source
est divisé en 3 fichiers, index.html, main.js, utils.js La syntaxe d'es6 est utilisée ici. en utilisant parcle L'environnement de développement est installé, il n'y aura donc aucune erreur si vous copiez le code directement et qu'une erreur se produit lors de l'exécution, si le navigateur ne peut pas être mis à niveau, vous pouvez modifier la syntaxe es6 en es5.
1. index.html
Il 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. 🎜>
Résumé/*
* 获取鼠标在canvas上的坐标
* */
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
}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. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :Utilisez HTML5 Comment dessiner des polygones tels que des triangles et des rectangles avec Canvas
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quelles écoles utilisent la toile ?
Aug 18, 2023 pm 05:59 PM
Les écoles utilisant Canvas comprennent l'Université de Stanford, le MIT, l'Université de Columbia, l'Université de Californie, Berkeley, etc. Introduction détaillée : 1. L'Université de Stanford utilise Canvas comme principale plate-forme d'apprentissage en ligne. Les enseignants et les étudiants de l'Université de Stanford utilisent Canvas pour gérer et communiquer le contenu des cours et apprendre grâce à des fonctions telles que les discussions en ligne, les soumissions de devoirs et les examens. L'Institut polytechnique et le MIT utilisent également Canvas comme système de gestion de l'apprentissage en ligne et gèrent les cours via la plateforme Canvas 3. Columbia University, etc.
Que sont les plug-ins de flèches de canevas ?
Aug 21, 2023 pm 02:14 PM
Les plug-ins de flèches du canevas incluent : 1. Fabric.js, qui possède une API simple et facile à utiliser et peut créer des effets de flèche personnalisés ; 2. Konva.js, qui fournit la fonction de dessiner des flèches et peut créer diverses flèches ; styles ; 3. Pixi.js, qui fournit des fonctions de traitement graphique riches et peut obtenir divers effets de flèche ; 4. Two.js, qui peut facilement créer et contrôler des styles de flèches et des animations 5. Arrow.js, qui peut créer divers effets de flèche ; ; 6. Rough .js, vous pouvez créer des flèches dessinées à la main, etc.
Quels sont les détails de l'horloge en toile ?
Aug 21, 2023 pm 05:07 PM
Les détails de l'horloge sur toile incluent l'apparence de l'horloge, les graduations, l'horloge numérique, les aiguilles des heures, des minutes et des secondes, le point central, les effets d'animation, d'autres styles, etc. Introduction détaillée : 1. Apparence de l'horloge, vous pouvez utiliser Canvas pour dessiner un cadran circulaire comme apparence de l'horloge, et vous pouvez définir la taille, la couleur, la bordure et d'autres styles du cadran 2. Lignes d'échelle, tracez des lignes d'échelle dessus ; le cadran pour représenter les heures ou les minutes. Position ; 3. Horloge numérique, vous pouvez dessiner une horloge numérique sur le cadran pour indiquer l'heure et les minutes actuelles ; 4. Aiguille des heures, aiguille des minutes, aiguille des secondes, etc.
Quelles versions de html2canvas existe-t-il ?
Aug 22, 2023 pm 05:58 PM
Les versions de html2canvas incluent html2canvas v0.x, html2canvas v1.x, etc. Introduction détaillée : 1. html2canvas v0.x, qui est une première version de html2canvas. La dernière version stable est la v0.5.0-alpha1. Il s'agit d'une version mature qui a été largement utilisée et vérifiée dans de nombreux projets ; 2. html2canvas v1.x, il s'agit d'une nouvelle version de html2canvas.
Quelles sont les propriétés de la toile tkinter ?
Aug 21, 2023 pm 05:46 PM
Les attributs du canevas tkinter incluent bg, bd, relief, width, height, curseur, highlightbackground, highlightcolor, highlightthickness, insertbackground, insertwidth, selectbackground, selectforeground, les attributs xscrollcommand, etc. Présentation détaillée
Comment afficher la trajectoire du mouvement de la souris dans le navigateur Edge_Étapes pour afficher la trajectoire du mouvement de la souris dans le navigateur Edge
Apr 02, 2024 pm 05:30 PM
1. Ouvrez d’abord le navigateur Edge et cliquez sur l’icône de geste de souris insérée. 2. Cliquez ensuite sur le bouton Paramètres dans la fenêtre contextuelle. 3. Cliquez ensuite sur le lien de raccourci pour les paramètres avancés. 4. Recherchez ensuite l'élément de réglage de la piste d'affichage de la souris. 5. Cochez ensuite la case devant l'élément de réglage. 6. De cette façon, lors de l'utilisation des gestes de la souris, la trajectoire de la souris sera affichée.
uniapp implémente comment utiliser Canvas pour dessiner des graphiques et des effets d'animation
Oct 18, 2023 am 10:42 AM
Comment utiliser Canvas pour dessiner des graphiques et des effets d'animation dans Uniapp nécessite des exemples de code spécifiques 1. Introduction Avec la popularité des appareils mobiles, de plus en plus d'applications doivent afficher divers graphiques et effets d'animation sur le terminal mobile. En tant que framework de développement multiplateforme basé sur Vue.js, uniapp offre la possibilité d'utiliser un canevas pour dessiner des graphiques et des effets d'animation. Cet article présentera comment Uniapp utilise Canvas pour obtenir des effets de graphique et d'animation, et donnera des exemples de code spécifiques. 2. toile
Apprenez le cadre de canevas et expliquez en détail le cadre de canevas couramment utilisé
Jan 17, 2024 am 11:03 AM
Explorez le framework Canvas : Pour comprendre quels sont les frameworks Canvas couramment utilisés, des exemples de code spécifiques sont nécessaires. Introduction : Canvas est une API de dessin fournie en HTML5, grâce à laquelle nous pouvons obtenir des graphiques et des effets d'animation riches. Afin d'améliorer l'efficacité et la commodité du dessin, de nombreux développeurs ont développé différents frameworks Canvas. Cet article présentera certains frameworks Canvas couramment utilisés et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre comment utiliser ces frameworks. 1.Cadre EaselJSEa
