html5无法绘制线条,如何选择在HTML5 Canvas上绘制的线条？

在HTML5画布中执行此操作的最简单方法是拍摄画布的图像数据的快照,并在鼠标移动期间查看鼠标下像素的Alpha颜色.

这是我写的核心代码.传递一个上下文和一个函数,它将使用像素下方的RGBA组件调用您的函数.

function pixelOnMouseOver(ctx,callback){

var canvas = ctx.canvas;

var w = canvas.width, h=canvas.height;

var data = ctx.getImageData(0,0,w,h).data;

canvas.addEventListener('mousemove',function(e){

var idx = (e.offsetY*w + e.offsetX)*4;

var parts = Array.prototype.slice.call(data,idx,idx+4);

callback.apply(ctx,parts);

},false);

}

以下是它在测试页面上的使用方式：

var wasOver;

pixelOnMouseOver(ctx,function(r,g,b,a){

var isOver = a > 10; // arbitrary threshold

if (isOver != wasOver){

can.style.backgroundColor = isOver ? '#ff6' : '';

wasOver = isOver;

}

out.innerHTML = "r:"+r+", g:"+g+", b:"+b+", a:"+a;

});