Wie verwende ich mehrere Klickereignisse auf der HTML5-Leinwand?

Wenn ein Kreis auf die Leinwand gezeichnet wird und die Hälfte davon rot und ein Teil des Kreises grau bemalt wird, rufen wir beim Klicken auf Rot Funktion 1 auf.

Wenn auf den grauen Teil geklickt wird, wird Funktion 2 aufgerufen und wir müssen ein wiederverwendbares Pfadobjekt verwenden, um die verschiedenen Teile zu speichern, die wir testen möchten. Click-Handler können verwendet werden, um die Leinwand freizugeben und das zu tun, was wir wollen. Pfadinformationen können mithilfe von Path2D-Objekten gespeichert werden.

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);

Überprüfen Sie dann mithilfe der x- und y-Achse, ob auf der gemeinsamen Leinwand Klicks vorhanden sind.

Dann durchlaufen Sie das Array von Pfaden, um zu testen, ob auf jedem Pfad Klicks vorhanden sind.

<canvas id = "myCanvas1"></canvas> // Then it is attached with corresponding canvas.

Das obige ist der detaillierte Inhalt vonWie verwende ich mehrere Klickereignisse auf der HTML5-Leinwand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!