HTML5画布线 - 我如何让它们看起来更流畅？

我想制作线条，但它们有锋利的边缘，例如如果你用这条线写一个字。在Photoshop中，您可以使用不太清晰的画笔，也可以采用高分辨率和缩小画面。 HTML5画布线也有不错的诀窍吗？HTML5画布线 - 我如何让它们看起来更流畅？

 canvas.addEventListener('mousemove', function(e) { 
     this.style.cursor = 'pointer'; 
     if(this.down) { 
      with(ctx) { 
       beginPath(); 
       moveTo(this.X, this.Y); 
       lineTo(e.pageX , e.pageY); 
       strokeStyle = red; 
       ctx.lineWidth=1; 
       stroke(); 
      } 
      this.X = e.pageX ; 
      this.Y = e.pageY ; 
     } 
    }, 0);

来源

2013-03-24 vuvu

可能的重复[绘画GOOD LOOKING（就像在Flash中）画布上的线（HTML5） - 可能吗？]（http://stackoverflow.com/questions/4179069/drawing-good-looking-like-in-flash- line-on-canvas-html5-possible） – JJJ 2013-03-24 17:19:14

@Juhana ......不，不一样的东西;） – markE 2013-03-24 17:55:59

正如你已经发现，当你让用户绘制鼠标移动你结束了，吸引了非常锯齿线点列表的折线。

你需要做的是：

减少点
的数量保持生成的路径真实用户的预期的形状。

所以，你想从进入“后”“前”：

enter image description here

的拉默 - 道格拉斯 - 普克多边形简化算法

您可以通过使用做到这一点Ramer-Douglas-Peucker（RDP）多边形简化算法。它减少了折线的“锯齿”，同时保持了预期路径的本质。

这里是RDP是如何工作的，什么是能够实现的概述：http://ianqvist.blogspot.com/2010/05/ramer-douglas-peucker-polygon.html

这里是RDP算法感谢马修·泰勒的JavaScript的执行力度：https://gist.github.com/rhyolight/2846020

在马修的执行力度“小量”是一个数字，表示你想要如何接近原始的“锯齿状”。

来源

2013-03-24 17:52:54 markE

好，如果想减少点数。但我想我想要一个不同的渲染，就好像我有更高的分辨率。 – vuvu 2013-03-24 20:57:56

HTML5画布线 - 我如何让它们看起来更流畅？

回答

相关问题