HTML5キャンバス - 二次曲線での予期しない効果

Question

最近、ちょうどキックのためにdoodlingアプリを開発しています。マウスで与えられたサンプルポイントで滑らかな曲線を描くための多くの方法を試した後、私はQuadratic Curveを使用して何かを解決しました。

私はこれらの曲線の理解は最適ではありませんが、私は彼らがどのように動作するのか理解していると思います。私が理解できないことは、カーブを描き、急に下がったとき、カーブのピークがもう丸められていないことです（フラットに見える）。あなたは（Y15にcx11から）曲線の最後の部分を削除した場合link to JCanvas sandbox

：

デモ

は私が話しているかを理解することがはるかに優れて link to another JCanvas sandbox。それはうまく見えますが、次のコントロールポイントとエンドポイントを追加すると、この奇妙な効果が得られます。

注：JCanvasは使用していませんが、同じバグがあり、サンドボックスは便利です。私はそれが私が得る座標から来ると思いますが、私は説明することができないし、回避策を見つけることができません/丸みを帯びて見えるようにハック...

サンドボックスで悩まされない人のために問題の原因となっている座標の短いバージョン：

X1：216、Y1：98、 CX1：216、CY1：97、 X2：216、Y2：98、 CX2：216、CY2：99 、 x3：215、y2：103,

理由は何ですか？数学のものは大歓迎です。私はこの問題について少し調べて読んだが、何か類似したものは見つけられなかった。

-

更新

サイモンが指摘したように、私はクローム16を使用していると私は、Firefox 4、最新のSafariでの例をテストしてみたバグがあります。私はOperaで試してみました。

バグがiPadにもあるので、私はむしろ不満を感じています。私はモバイルWebアプリをやろうとしていました。

回避策やハッキングに関するご意見はありますか？

Answer 1

回避方法が見つかりました。それはそれらの愚かなas-blah-接近 - ゼロのバグの1つです、私は本当にそれらのための適切な名前を知らない。 2つのポイント間の接続が非常に小さな垂直線であり、Safariが混乱した場合、角を丸めるのは難しいです。

問題のある場所に、丸みを付ける必要がある1ピクセル高い縦線カーブがあります。

Xの送り先が1つの2次曲線と次の曲線の間で同じ場合、safariは問題を起こします。だから、これは悪いです：

ctx.beginPath(); 
ctx.moveTo(161,178); 
ctx.quadraticCurveTo(215, 102, 216, 100); 
ctx.quadraticCurveTo(216, 98, 216, 98); 
ctx.quadraticCurveTo(216, 99, 215, 103); // I have the same X as the previous quadratic 
ctx.quadraticCurveTo(213, 107, 211, 120); 
ctx.quadraticCurveTo(209, 133, 209, 145); 
ctx.stroke(); 

はここでそれを参照してください。

ctx.beginPath(); 
ctx.moveTo(161,178); 
ctx.quadraticCurveTo(215, 102, 216, 100); 
ctx.quadraticCurveTo(216, 98, 216, 98); 
ctx.quadraticCurveTo(216.01, 99, 215, 103); // 216.01 is not the same X as 216! 
ctx.quadraticCurveTo(213, 107, 211, 120); 
ctx.quadraticCurveTo(209, 133, 209, 145); 
ctx.stroke(); 

はここでそれを参照してください：http://jsfiddle.net/Ws6UY/1/

どのように愚かなhttp://jsfiddle.net/Ws6UY/

だから我々はちょうどその値に最も小さい量を変更した場合！ Safari/iOSブラウザを動作させ続けるために必要なことは、x（おそらくy）の値が最後の点と同じでないことを確認することだけです。