Detailed Canvas 10-Graphic Element Interaction

introduce

isPointInPath() determines whether the path contains a monitoring point (passed in as a parameter).

# isPointInPath() introduction

Method description boolean ctx.isPointInPath(x, y) Determine whether the monitoring point (x, y) is within the path boolean ctx.isPointInPath(x, y, fillRule) Determine the positional relationship between the monitoring point (x, y) and the path, through fillRule to determine whether it is in-path or out-of-path. The optional parameters of fillRule are nonzero (non-zero wrapping algorithm) and evenadd (parity wrapping algorithm)

# use

If context.rect(10,10,100,100), then all points in this path can be judged as true by isPointInPath(x,y), such as (50,50);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.rect(10, 10, 100, 100);
ctx.stroke();
con