Maison >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

不言original: 2018-06-11 17:25:134582parcourir

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(&#39;#theCanvas&#39;)
    if (!theCanvas || !theCanvas.getContext) {
        //不兼容canvas
        return false
    } else {
        //代码主体
    }
})()

3. Récupérez l'objet 2D.

let context = theCanvas.getContext(&#39;2d&#39;)

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(&#39;2d&#39;)
        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
}

Il 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. la liaison est son document et sa 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. 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!

php html5 css3 html es6 NULL 封装 bool JS 对象事件 canvas 鼠标事件算法

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Solution au problème selon lequel la balise vidéo en HTML5 ne peut pas lire le mp4Article suivant：Solution au problème selon lequel la balise vidéo en HTML5 ne peut pas lire le mp4

Articles Liés

Voir plus