html画布颜色选择,javascript – 选择并更改html5画布中一行的颜色？

你必须遍历你的线阵列,并为每个线段做：

核心原则是在路径中添加一行,然后测试if(x,y)是否在该行上：

ctx.beginPath();

ctx.moveTo(x1, y1); // start of line

ctx.lineTo(x2, y2); // end of line

// this will test the point against the line (lineWidth matters)

if (ctx.isPointInStroke(x, y)) {

// draw line segment in f.ex. different color here

ctx.strokeStyle = "red";

ctx.stroke(); // we already have a line segment on the path

}

没有必要实际划线,只需重建路径.根据需要采用.

这是一个完整的例子：

var ctx = canvas.getContext("2d"),

lines = [], // store line segments for demo

count = 10, // max 10 lines for demo

i = 0;

for(; i < count; i++) {

var x = Math.random() * canvas.width; // random point for end points

var y = Math.random() * canvas.height;

if (i) ctx.lineTo(x, y); // if not first line, add lineTo

else ctx.moveTo(x, y); // start point

lines.push({ // store point to create a poly-line

x: x,

y: y

});

}

ctx.lineWidth = 5;

ctx.lineJoin = "round";

ctx.strokeStyle = "blue";

ctx.stroke(); // ..and draw line

// here we use the principle

canvas.onclick = function(e) {

var r = canvas.getBoundingClientRect(), // adjust to proper mouse position

x = e.clientX - r.left,

y = e.clientY - r.top,

i = 0

// for each line segment, build segment to path and check

for(; i < count - 1; i++) {

ctx.beginPath(); // new segment

ctx.moveTo(lines[i].x, lines[i].y); // start is current point

ctx.lineTo(lines[i+1].x, lines[i+1].y); // end point is next

if (ctx.isPointInStroke(x, y)) { // x,y is on line?

ctx.strokeStyle = "red"; // stroke red for demo

ctx.stroke();

break;

}

}

}

要提高灵敏度,可以将lineWidth调整为更大的值(无需重绘).