html5 canvas bezierCurveTo涉及4個(gè)點(diǎn)：o(開始點(diǎn)),cp1（控制點(diǎn)1）,cp2（控制點(diǎn)2）,p（結(jié)束點(diǎn)）

當(dāng) o到p的走向（向量op）和cp1到cp2的走向（向量c12）相反時(shí)，就會(huì)出現(xiàn)打結(jié)的情況，我采取降級處理的方法，即發(fā)現(xiàn)會(huì)打結(jié)時(shí)，改為使用lineTo：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、武宣網(wǎng)站維護(hù)、網(wǎng)站推廣。

                p = parts[i][j];
                var o = parts[i][j-1]; //p前面一點(diǎn)
                var cp1 = cps[2*(j-1)];
                var cp2 = cps[2*j-1];
                var op = p.subtract(o),c12=cp2.subtract(cp1);
                //繞過打結(jié)問題
                if(op.x*c12.x+op.y*c12.y>0) //控制點(diǎn)走向和折線走向一致
                    ctx.bezierCurveTo(cp1.x,cp1.y, cp2.x,cp2.y, p.x, p.y);
                else
                    ctx.lineTo(p.x,p.y);

向量夾角公式：

cosθ=向量a×向量b/|向量a|×|向量b| = (x1x2+y1y2)/[√(x12+y12)√(x22+y22)]

我將兩向量夾角大于90度判定為兩向量反向，
當(dāng)180>θ>90時(shí)cosθ<0，夾角公式分母總為正，所以只要判定分子的正負(fù)即可。

---

過特征點(diǎn)平滑效果，可參考：
https://blog.csdn.net/u011284073/article/details/81385922

控制點(diǎn)的計(jì)算過程可以參考 http://turfjs.org/docs#bezierSpline 的源碼，中點(diǎn)連線平移得到控制點(diǎn)，其使用的方法即：https://blog.csdn.net/ch_soft/article/details/7401582

網(wǎng)頁題目：bezier插值繞過打結(jié)問題
瀏覽地址：http://www.rwnh.cn/article10/igpdgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)、、微信小程序、服務(wù)器托管、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)