javascript - Canvas 上漂亮的椭圆？

Question

是否可以用更好的笔触创建椭圆形/椭圆形，而没有那种“模糊”的边界，类似于:

• http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-ellipse-tutorial/
• http://www.html5canvastutorials.com/advanced/html5-canvas-ovals/

我能否以某种方式在椭圆形周围创建更清晰的描边线，或者我是否必须忍受“模糊”的边界？

Answer 1

!你能行的 !通过做后处理:

1) 使用 globalCompositeOperation :

编辑: 是的，但不是:至少在 Chrome 上，'destination-in' 没有 符合规范:源用于计算目标 颜色，所以我们不能从阴影中得到单一颜色。
(我在 JSBin 上试了一下:http://jsbin.com/ecipiq/4/)

或

2) 使用 getImageData 和性能数组:

• 在临时 Canvas 中绘制边框
• 获取 Canvas 的ImageData
• 获取底层数据的 Uint32Array 或 Uint8Array View
• 在数组内线性循环:如果值>阈值将其设置为边框颜色
• 在目标 Canvas 上绘制椭圆的填充
• 将图像数据放在目标 Canvas 上。

哪个？

• 第二个不需要 globalCompositeOperation 即可工作。
  但在大多数浏览器(所有？)上，获取/放置 ImageData 的速度非常慢，这个事实
  单独可能会使该解决方案无效。
  好处是您可以精确地决定如何取消抗锯齿。

其他 StackOverflow 成员可能对这一切有深入的了解。

这些解决方案中的任何一个都会比手写的非别名解决方案快得多 椭圆函数。

第一个解决方案的有用链接:
http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/

让您更快入门的备注:
您可以通过以下方式在 ImageData 上获取 UInt32Array View :

var myGetImageData = myTempCanvas.getImageData(0,0,sizeX, sizeY);
sourceBuffer32     = new UInt32Array(myGetImageData.data.buffer);

然后 sourceBuffer32[i] 包含打包成一个的红色、绿色、蓝色和透明度 无符号 32 位整数。将它与 0 进行比较以了解像素是否为非黑色 ( != (0,0,0,0) )

或者您可以使用 Uint8Array View 更精确:

var myGetImageData = myTempCanvas.getImageData(0,0,sizeX, sizeY);
sourceBuffer8     = new Uint8Array(myGetImageData.data.buffer);

如果你只处理灰色阴影，那么 R=G=B，所以要注意

sourceBuffer8[4*i]>Threshold

并且您可以使用 UInt32Array View 一次将第 i 个像素设置为黑色:

sourceBuffer32[i]=(255<<24)||(255<<16)||(255<<8);

从这个例子中你肯定能够弄清楚如何处理除灰色/黑色之外的其他颜色。