我有一个绘图应用程序使用html5画布.当用户正在绘制和笔滑出画布区域时,chrome会以浅蓝色或黄色的方式在页面上显示html元素.
这对绘画的经验是破坏性的.有没有办法防止这种突出发生？
事件处理和绘图代码是基于这个帖子：http://jsfiddle.net/rnNFB/1/
var x ;
var y ;
var lower = $('#lower').get(0).getContext('2d') ;
var upper = $('#upper').get(0).getContext('2d') ;
var dragging = false ;
function drawStroke(ctx){
var i ;
ctx.strokeStyle='rgba(0,0.5)' ;
ctx.lineWidth=10 ;
ctx.beginPath() ;
ctx.moveTo(x[0],y[0]) ;
for (i=1; i < x.length; i++){
ctx.lineTo(x[i],y[i]) ;
}
ctx.stroke() ;
}
$('#upper').mousedown(function(e){
x=[e.layerX];
y=[e.layerY];
dragging=true}) ;
$('#upper').mousemove(function(e){
if (dragging){
x.push(e.layerX);
y.push(e.layerY);
upper.clearRect(0,upper.canvas.width,upper.canvas.height) ;
drawStroke(upper) ;
}}) ;
$('#upper').mouseup(function(e){
dragging = false ;
upper.clearRect(0,upper.canvas.height) ;
drawStroke(lower) ;
}) ;
解决方法
将以下CSS类应用于不可选择的元素.它也可以应用于身体(尽管最佳实践可能只是禁用对真正需要它的元素的用户选择).
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
JS(仅适用于IE< 10)：
// the onselectstart way for navigator.appName === "Microsoft Internet Explorer"
document.onselectstart = function() { return false; };
但是它也可能是应用程序的整合：如果您在jsFiddle中选择一个大的lineWidth并且移动鼠标非常缓慢,您可以在草图中看到一些丑陋的效果(块).始终检查距离onmousemove(拖动)坐标到最后坐标的距离不要太小.例如,如果距离超过线束的1/6,则仅将坐标添加到草图.
