HTML5 캔버스에서 여러 클릭 이벤트를 사용하는 방법은 무엇입니까?

캔버스에 원을 그리고 절반은 빨간색으로, 원의 일부는 회색으로 칠할 때 빨간색을 클릭하면 함수 1을 호출합니다.

회색 부분을 클릭하면 함수 2가 호출되며, 테스트하려는 다양한 부분을 저장하려면 재사용 가능한 경로 개체를 사용해야 합니다. 클릭 핸들러를 사용하여 캔버스를 공유하고 원하는 작업을 수행할 수 있습니다. 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);

그런 다음 x 및 y 축을 사용하여 일반 캔버스에서 클릭을 확인합니다.

그런 다음 경로 배열을 반복하여 각 경로의 클릭을 테스트합니다.

rreee

위 내용은 HTML5 캔버스에서 여러 클릭 이벤트를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!