这确实令人不安,但你想要做的事情却不忘形象。 所涉数据。

你们想到的是,在你驾stro他们时,你希望自己能够发挥的准确功能。 引证:

由于计算法如何界定一条途径,将一条中线运行中路段的重叠部分视为其结合是所描述的。

http://www.whatwg.org/specs/web-apps/present-work/multipage/the-canvas-element.html#trace-a-path” rel=“noreferer”>。

不管怎么说,你所希望的基本上是一条模糊的道路,只是你可以一劳永逸地回避的弧线,你完全能够取得你所期望的效果。

The only problem is that there is no way to make a blurry path in canvas. Or almost no way.

我们不使用这条道路,而是可以使用<>路面<>的影子,以模拟服从同样规则的bl圈。

这里的唯一问题是,你不想看到实际的道路,你只是想看到这条道路的阴影。 使中风透明化赢得了以下工作: 影子只能从不言而喻的角度看待。

但是,影子确实有以下特性:shadowOffsetX和shadowOffsetY,这些特性通常被用来用一个钢子或两个钢子来改变阴影,从而造成对光源的幻觉。

但是,如果我们从现在的阴影中汲取什么东西,你会看到它们? 或者,如果我们选取paths的话。 你们能够看到他们,你们都能看到什么是阴影?

确实如此做。 这里迅速取得了成果,你原来的法典处于顶端,第二个阴影是:

这不是你以前在梯度和大小方面所做的事,而是非常接近,我相信,通过干涉你的价值观,你会变得更加接近。 两.。 日志确认,我们想要的一件事,一个不超过124(255人中有245人)的甲型字母正正确出现在它原来使用的143和134处的地方。

The fiddle to see the Code in action:

因此,我决定作一些分析。 我撰写了一些基本的 Java本(可在上看到的经修改的版本),以便从1250x600 canvas的五个不同类型中提取2000年版本,在五种主要桌面浏览器和移动式观测台的最新版本中记录这五项业务的历时。 (Sorry, desktop Sato)。 我也没有什么灵丹妙药来测试。 然后,我尝试了不同的效果组合,记录了过去的时间。

var gradient1 = context.createRadialGradient(75,100,2,75,100,80);
gradient1.addColorStop(0,"yellow");
gradient1.addColorStop(1,"black");

var gradient2 = context.createRadialGradient(125,100,2,125,100,80);
gradient2.addColorStop(0,"blue");
gradient2.addColorStop(1,"black");

context.beginPath();
context.globalCompositeOperation = "lighter";
context.globalAlpha = 0.5;
context.fillStyle = gradient1;
context.fillRect(0,0,200,200);
context.fillStyle = gradient2;
context.fillRect(0,0,200,200);
context.globalAlpha = 1.0;
context.closePath();

IE 11 (64-bit Windows 10)
 Rects     =   4 ms
 Arcs      =  35 ms
 Gradients =  57 ms
 Images    =   8 ms
 Shadows   = 160 ms

Edge (64-bit Windows 10)
 Rects     =   3 ms
 Arcs      =  47 ms
 Gradients =  52 ms
 Images    =   7 ms
 Shadows   = 171 ms

Chrome 48 (64-bit Windows 10)
 Rects     =   4 ms
 Arcs      =  10 ms
 Gradients =   8 ms
 Images    =   8 ms
 Shadows   = 203 ms

Firefox 44 (64-bit Windows 10)
 Rects     =   4 ms
 Arcs      =  21 ms
 Gradients =   7 ms
 Images    =   8 ms
 Shadows   = 468 ms

Opera 34 (64-bit Windows 10)
 Rects     =   4 ms
 Arcs      =   9 ms
 Gradients =   8 ms
 Images    =   8 ms
 Shadows   = 202 ms

Mobile Safari (iPhone5, iOS 9)
 Rects     =  12 ms
 Arcs      =  31 ms
 Gradients =  67 ms
 Images    =  82 ms
 Shadows   =  32 ms

1. Among filled shapes, filled rects are consistently the fastest operation in all browsers and environments tested.
2. Filled full arcs (circles) are about 10x slower in IE 11 and Edge than filled rects, compared to about 3.5x slower in the other major browsers.
3. Gradients are roughly 3x slower than rects in IE 11, Chrome 48, and Opera 34, but a remarkable 100x slower in Firefox 44 (see Bugzilla report 728453).
4. Images via drawImage() are roughly 1.5x as fast as filled rects in all desktop browsers.
5. Shadowed filled arcs are slowest of all, ranging from around 50x slower than filled rects in IE, Edge, Chrome and Opera to 100x slower in Firefox.
6. Chrome 48 and Opera 34 are both remarkably speedy in every category of shape except shadowed filled arcs, but they re no worse than other browsers there.
7. Chrome and Opera crash when drawImage() draws 1000 shapes where either shadowOffsetX or shadowOffsetY is given a value outside the physical screen resolution.
8. IE 11 and Edge are slower to paint arcs and gradients than other desktop browsers.
9. drawImage() is slow on mobile Safari. It s actually faster to draw multiple gradients and shadowed arcs than to draw one copy many times with drawImage().
10. Drawing in Firefox is sensitive to prior operations: drawing shadows and gradients makes drawing arcs slower. Fastest times are shown.
11. Drawing in Mobile Safari is sensitive to prior operations: shadows make gradients slower; gradients and arcs make drawImage() even slower than it normally is. Fastest times are shown.

<>strong>ANALYSIS

虽然“影子”特征是一种简单和直观有效的混合方式,但比所有其他技术要慢得多。 这限制了其用途,而这种应用只需要汲取几个阴影,而不需要迅速和反复地利用许多阴影。 此外,在使用提款权时,投了阴影。 犯罪 X或影子 Y 价值大于3 000个 causes48和34号 Opera,几乎一分钟hang,耗时CPU周期,然后坠毁我的NVidia显示司机,甚至在更新后。 谷歌搜索发现,当一大笔阴影和 draw合使用时,没有用于 Ch的丑闻描述这一错误。

对于需要混合的异构体的用途,对影子采用最直观的类似做法是,将全球复合物作业设定为“灯光”并使用具有全球升值的提纲,以反复提取预设的半衰变体,或者在需要不同的颜色时提取单个梯度。 这并不完全与重叠的影子相匹配,而是紧密,避免进行每轮计算。 (然而,我们注意到,在流动游乐中,直接投影填满的弧体实际上比梯度和提纲更快。) 在为“灯光”而开展全球合作行动的同时,IE 11和Her在提炼弧方面比使用所有主要台式浏览器的影子更快,而且速度仅比在流动航道上填满的影子慢两倍。

http://www.ohchr.org。

If your only target platform is iPad/iPhone, the fastest method for nice-looking blended shapes is shadowed filled arcs. Otherwise, the fastest method with comparable appearance that I have found so far that works in all of the major desktop browsers is drawing radial gradients with globalCompositeOperation set to "lighter" and controlling opacity with globalAlpha.

<>说明: 在我进行的绘画测试中,有一些明显的改进方法。 尤其是,将每一形状的每一种情况都推向一个冲淡的缓冲地带,然后把整个缓冲带上可见的透镜,将大大改善业绩。 但是,这将否定这一检验的目标,即比较在可见的血管上绘制不同形状的相对速度。

http://jsfiddle.net/2qQLz/“rel=“nofollow” http://jsfiddle.net/2qQLz/是试图提供解决办法的。 如果接近你们的需要,可以进一步发展。 它把梯度限定在圈子交汇的一侧。 对于沿横向线的同一半径的两圈子,很容易找到圆圈交叉点的x价值,并为每一圈子的梯度填充提取束子。

两个任意的圈子比较困难,但是仍然可以找到交汇点,而且每个圈子仍然可以选择紧凑的试金。 随着更多的圈子的增加,它将逐渐变得更加复杂。

composite Mode 你们发现他们。 如我所知,你可以做比这更好的工作,而没有人工操作的

因此,每轮解决办法是什么?

你的第一项选择比第二项选择更具有多面性,因为你能够利用正常的血管方法,然后把这种血管vas倒在你的可见面孔上。 See @Phrogz context-blender 关于如何将一种环境融为一体的项目

if (src.a <= dst.a) {
    result = dst;
} else {
    result = src;
}