漂亮的椭圆在画布上？ [英] Nice ellipse on a canvas?
问题描述
是否可以创建椭圆形/椭圆形，并且没有模糊边框类似的更好的笔触：
Is it possible to create ovals/ellipses with nicer strokes that have not that "blurred" border similar to:
- http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs- ellipse-tutorial /
- http://www.html5canvastutorials.com/advanced/html5-canvas-ovals/
- http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-ellipse-tutorial/
- http://www.html5canvastutorials.com/advanced/html5-canvas-ovals/
我可以以某种方式创建更多围绕椭圆形的清晰划痕线，还是我必须与那个模糊边界一起生活？
Can I somehow create more clear stroke line around the oval, or do I have to live with that "blurred" border?
推荐答案
！你能行的 ！通过执行后处理：
! you can do it ! by doing post-processing :
1）使用globalCompositeOperation：
1) Using globalCompositeOperation :
编辑：
是， no：至少在Chrome上，'destination-in'不
匹配规格：源用于计算目标
颜色，因此我们不能使用阴影单色。
（我试过JSBin： http://jsbin.com/ecipiq/4/）
或
2）使用getImageData和performance Array：
2) Using getImageData and performance Array :
- 在临时画布中绘制边框
- 绘制画布的getImageData
- 获取Uint32Array或Uint8Array查看基本数据
- 在数组内线性循环：if value> threshold set it to border color
- 在目标画布上绘制椭圆的填充
- 在目标画布上放置putImageData。
- draw border in a temp canvas
- getImageData of the canvas
- get a Uint32Array or Uint8Array view on underlying data
- loop linearly within array : if value > threshold set it to border color
- draw the fill of the ellipse on target canvas
- putImageData on target canvas.
哪一个？
- 不需要globalCompositeOperation工作。
但是在大多数浏览器（所有？）get / put ImageData是慢的，这个事实
单独可能无效这个解决方案。
好东西是你可以精确地决定如何解除反锯齿。
- Second one does not require globalCompositeOperation to work.
But on most browsers (all ?) get/put ImageData are slow as hell, this fact
alone might invalidate this solution.
The nice thing is you can precisely decide how to un-antialias.
其他StackOverflow成员可能对此有深入了解。
Other StackOverflow members might have insight on all this.
这些解决方案将比手写的非锯齿的
椭圆函数快得多。
Any of those solution will be much faster than a hand-written non-aliased ellipse function.
第一个解决方案的使用链接：
< a href =http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/ =nofollow> http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/
usefull link for first solution :
http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/
注释以便您更快入门：
您可以通过以下方式获取ImageData的UInt32Array视图：
Remarks to get you started faster :
You can get a UInt32Array view on your ImageData with :
var myGetImageData = myTempCanvas.getImageData(0,0,sizeX, sizeY);
sourceBuffer32 = new UInt32Array(myGetImageData.data.buffer);
那么sourceBuffer32 [i]包含红，绿，蓝和透明度封装成一个
无符号32位整数。比较它到0知道像素是否是非黑色的（！=（0,0,0,0））
then sourceBuffer32[i] contains Red, Green, Blue, and transparency packed into one unsigned 32 bit int. Compare it to 0 to know if pixel is non-black ( != (0,0,0,0) )
或者你可以更精确的Uint8Array视图：
OR you can be more precise with a Uint8Array view :
var myGetImageData = myTempCanvas.getImageData(0,0,sizeX, sizeY);
sourceBuffer8 = new Uint8Array(myGetImageData.data.buffer);
如果你只处理灰度阴影，那么R = G = B， p>
If you deal only with shades of grey, then R=G=B, so watch for
sourceBuffer8[4*i]>Threshold
，您可以使用UInt32Array视图一次将第i个像素设置为黑色：
and you can set the i-th pixel to black in one time using the UInt32Array view :
sourceBuffer32[i]=(255<<24)||(255<<16)||(255<<8);
你一定能够找出如何处理灰色/黑色以外的其他颜色这个例子。
You'll surely be able to figure out how to deal with other colors than grey/black out of this example.
这篇关于漂亮的椭圆在画布上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
