I’m using cocos2d-js v3.0Final in Chrome. The drawQuadBezier function of cc.DrawNode draws something additional to normal one. See below:
I mark the additional lines with red circles.
I try the DrawPrimitivesTest, and add some drawQuadBezier in it:
draw.drawQuadBezier(cc.p(126.5, 198.5), cc.p(126.5, 198.5), cc.p(130.75,195.75), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(130.75,195.75), cc.p(135,185), cc.p(135,193), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(135,193), cc.p(135,177), cc.p(131,174.5), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(131,174.5), cc.p(127,172), cc.p(124.5,173.5), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(124.5,173.5), cc.p(122,175), cc.p(112.5,187), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(112.5,187), cc.p(103,199), cc.p(103,201), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(103,201), cc.p(103,203), cc.p(110.5,203.5), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(110.5,203.5), cc.p(118,204), cc.p(126.5,198.5), 10, 2, cc.color(0, 255, 0, 255));
It also has the problem, see below:
The red arrow in above image indicates the strange things in drawing.
How to solve this problem?
Furthermore, I test in IE11, and it’s very good:
No additional lines and antialias is enabled. I think the difference between Chrome and IE11 is that webgl is used in Chrome and canvas is used in IE11. Can this problem be solved in webgl for Chrome? And can antialias be enabled in webgl?
After more tests, I found it’s an obvious problem of WebGL. I improved my code and replace drawQuadBezier whith drawPoly. Problem still exists. Below is the Chrome results of same code, only difference in renderMode (WebGL/Canvas).
For renderMode == 0:
For renderMode == 1:
Hope to fix it ASAP!