我正在使用<canvas>
来捕获用户签名输入,并试图找出如何平滑鼠标的输入。
我认为我需要逐个处理用户的鼠标移动,并对每个部分进行平滑处理,我不是要超级平滑,但任何有改进的地方都是好的。
谢谢, 马克
ctx.lineCap = 'round';
<canvas id="canvas"></canvas>
JavaScript:
window.onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
canvas.height = height;
canvas.width = width;
canvas.addEventListener('mousedown', function(e) {
this.down = true;
this.X = e.pageX ;
this.Y = e.pageY ;
this.color = rgb();
}, 0);
canvas.addEventListener('mouseup', function() {
this.down = false;
}, 0);
canvas.addEventListener('mousemove', function(e) {
this.style.cursor = 'pointer';
if(this.down) {
ctx.beginPath();
ctx.moveTo(this.X, this.Y);
ctx.lineCap = 'round';
ctx.lineWidth = 3;
ctx.lineTo(e.pageX , e.pageY );
ctx.strokeStyle = this.color;
ctx.stroke();
this.X = e.pageX ;
this.Y = e.pageY ;
}
}, 0);
function rgb() {
color = 'rgb(';
for(var i = 0; i< 3; i++) {
color += Math.floor(Math.random() * 255)+',';
}
return color.replace(/\,$/,')');
}
};
我知道这是一个10年前的问题,但我认为答案并不完整。为了获得平滑线条效果,您需要在画布上下文中设置两个属性:
context.lineCap = 'round'
context.lineJoin = 'round'
lineJoin
。 非常感谢! - Blackfadedhttps://developer.mozilla.org/samples/canvas-tutorial/4_6_canvas_linecap.html
使用 贝塞尔曲线 怎么样?
bezierCurveTo
替代了lineTo
。如果您每隔一个点进行采样,则平滑效果会更明显。即使没有平滑,我的签名也不会特别“锯齿状”。签名最不准确的部分是大体变化,这些变化并不能通过平滑得到真正的改善。 - user287466我没有进行过任何测试,但你可以尝试使用径向渐变填充绘制小圆圈。
quadraticCurveTo
,但你必须自己计算中间点。quadraticCurveTo
,必须说它比人们想象的要复杂一些。如果仅在每个下一个线段上使用控制点(计算为前一个线段的一半),则可能会导致呈弧形的演示。为了真正做出平滑曲线,每个新线段都需要从头到尾重新计算整个路径(或至少在每个新线段添加时影响前一个线段)-供您参考。 - GullerYA