Comment utiliser plusieurs événements de clic sur un canevas HTML5 ?

Lorsqu'un cercle est dessiné sur la toile et que la moitié de celui-ci est peinte en rouge et qu'une partie du cercle est peinte en gris, lorsque l'on clique sur le rouge, nous appelons la fonction 1.

Lorsque l'on clique sur la partie grise, la fonction 2 est appelée, et nous devons utiliser un objet chemin réutilisable pour stocker les différentes parties que nous voulons tester. Les gestionnaires de clics peuvent être utilisés pour partager le canevas et faire ce que nous voulons. Les informations de chemin peuvent être stockées à l'aide d'objets Path2D.

var path1 = new Path2D();
var path2 = new Path2D();

var newpaths = [path1,path 2];   // Array is needed to store paths

path1.arc(200, 85,650, -0.2 * Math.PI, 2.7 * Math.PI);  // Path for red part
path2.arc(200, 85, 60, 2.7 * Math.PI, -1.1 * Math.PI);  //Path for  grey part


// Two path objects are rendered  using a common context ctx1, but with different style
ctx1.lineWidth = 16;
ctx1.strokeStyle = "#d43030";
ctx1.stroke(path1);
ctx1.strokeStyle = "#b8b8b8";
ctx1.stroke(path2);

Vérifiez ensuite les clics sur le canevas commun à l'aide des axes x et y

Parcourez ensuite le tableau de chemins pour tester les clics sur chaque chemin.

<canvas id = "myCanvas1"></canvas> // Then it is attached with corresponding 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!