Introducción al manejo de eventos del lienzo HTML5

DOM es una parte muy importante del campo front-end web. No solo se utilizará DOM al procesar elementos HTML, sino también programación gráfica. Por ejemplo, en el dibujo SVG, se insertan varios gráficos en la página en forma de nodos DOM, lo que significa que los gráficos se pueden operar utilizando el método DOM. Por ejemplo, si hay un elemento <path id = p1>, puede usar directamente jQuery para agregar el evento de clic $ ('#p1'). Click (function () {...}). Sin embargo, este método de procesamiento DOM ya no es aplicable en el lienzo HTML5. El lienzo utiliza otro conjunto de mecanismos. No importa cuántos gráficos se dibujen en lienzo, el lienzo es un todo. Los gráficos mismos son en realidad parte del lienzo y no se pueden obtener por separado, por lo que es imposible agregar directamente los eventos de JavaScript a un determinado gráfico.

En el lienzo, todos los gráficos se dibujan en el marco. El método de dibujo no generará los elementos gráficos dibujados como un valor de retorno, y JS no puede obtener los elementos gráficos ya dibujados. Por ejemplo: