我正在使用< canvas>以签名的形式捕获用户输入,并尝试找出如何平滑鼠标的输入.
我想我需要通过块处理用户的鼠标移动块,平滑每个块,我不是在超级平滑之后,但对锯齿形输入的任何改进将是好的.
谢谢,
标记
解决方法@H_502_9@
不知道这可能会帮助你,
我在几分钟内从头开始写这个代码.
标记：
<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(/\,$/,')');
}
};
我在几分钟内从头开始写这个代码.
标记：
<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(/\,$/,')');
}
};
