Đường kẻ mịn được vẽ trong canvas

Question

Tôi đang sử dụng <canvas> để nắm bắt dữ liệu nhập của người dùng dưới dạng chữ ký và đang cố gắng tìm ra cách làm mịn đầu vào từ chuột.

Tôi nghĩ rằng tôi cần phải xử lý các chuyển động của chuột của người dùng bằng đoạn và nhẵn từng đoạn, tôi không phải sau khi siêu mịn nhưng bất kỳ cải tiến nào trên đầu vào bị lởm chởm sẽ tốt.

Cảm ơn, Đánh dấu

Answer 1

Không chắc chắn điều này có thể giúp bạn, Tôi đã viết mã này từ đầu trong vài phút.

Hãy thử http://jsbin.com/ateho3

đánh dấu:

<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(/\,$/,')'); 
    }  
    }; 

Answer 2

xem xét kết nối các dấu chấm bằng cách sử dụng dây chuyền tự động, hoặc thậm chí, sử dụng quadraticCurveTo, nhưng bạn phải tính toán điểm trung lộ của chính mình.

Answer 3

Tôi chưa thử nghiệm điều này theo bất kỳ cách nào, nhưng bạn có thể thử vẽ các vòng tròn nhỏ với tô chuyển tiếp tô tròn.

Answer 4

Làm thế nào về việc sử dụng Bezier curves?

Answer 5

Tôi phải tạo bản vẽ canvas mịn cho ứng dụng web dành cho thiết bị di động và đã học được vài điều. Các Answer of Avinash là rất tốt nhưng nếu bạn tăng chiều rộng dòng, khi bạn vẽ bạn sẽ thấy các dòng bị hỏng. Đó là bởi vì giới hạn dòng là hình chữ nhật theo mặc định.

Để làm cho dòng mượt mà hơn, bạn cần chỉnh sửa một chút gì đó.

ctx.lineCap = 'round';

tweak nhỏ này sẽ cung cấp cho bạn một đường siêu mịn.

Để biết thêm về điều này, hãy thử liên kết sau

https://developer.mozilla.org/samples/canvas-tutorial/4_6_canvas_linecap.html