小編給大家分享一下canvas中如何繪制貝塞爾公式推導(dǎo)與物體跟隨復(fù)雜曲線的軌跡運(yùn)動(dòng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)江華,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

效果預(yù)覽

在本例中生成的曲線由以上文章中的源碼提供。

貝塞爾曲線公式推導(dǎo)

上面這張圖是貝塞爾曲線的完整公式，看起來一臉懵逼=。=，因?yàn)檫@是N階的推導(dǎo)公式，本次我們以一二階貝塞爾公式的推導(dǎo)來理解一下這個(gè)推導(dǎo)公式的由來。先來看下網(wǎng)上流傳已久的幾張貝塞爾動(dòng)圖：

在這三張圖中最重要的部分是我們需要理解變量t。t的取值范圍是0-1。從上面的gif中也可以看出來似乎曲線的繪制過程就是t從0到1的過程。嗯其實(shí)就是這樣的。t的真實(shí)含義是什么呢？

在p0p1、p1p2、p2p3等等的起點(diǎn)到控制點(diǎn)再到終點(diǎn)的連線中，每段連線都被分割成了兩部分（仔細(xì)看動(dòng)圖中的黑色、綠色、藍(lán)色圓點(diǎn)），各段連線中兩部分的比值都是相同的，比值范圍是0到1，而這個(gè)比值就是t

來看下面的一階貝塞爾曲線示意圖：

pt是p0p1上的任意一點(diǎn)，p0pt / ptp1 = t。從而我們可以引出下面的推導(dǎo)

此時(shí)t為時(shí)間，v為速度。我們可以看做從p0到p1的距離等于固定速度乘以固定時(shí)間

故到p上某一點(diǎn)的時(shí)間為固定的速度乘以某個(gè)時(shí)間值。同時(shí)固定的速度已經(jīng)已經(jīng)可以表示為上面的推導(dǎo)公式。此時(shí)等式右邊就形成了t(0,1) / t；即相當(dāng)于某個(gè)時(shí)間值 / 固定時(shí)間值，即產(chǎn)生了我們一開始所強(qiáng)調(diào)的變量t，其取值范圍為[0,1]。從而下面的等式也就比較好理解了。

至此一階貝塞爾曲線我們已經(jīng)推到了出來，其中變量為起點(diǎn)、終點(diǎn)與比值t。

那么二階公式如何從一階過渡過去呢？

來看下面這張圖：

其中Pp(t)的經(jīng)過路徑就是我們所求的二階貝塞爾曲線，那么其實(shí)我們也可以將其從一階進(jìn)行演變：

我們先將pa、pb兩個(gè)點(diǎn)所連線段當(dāng)做一階曲線，之后再由兩端一階曲線分別表示pa、pb，最后就得到了我們的二階曲線公式。仔細(xì)觀察就能發(fā)現(xiàn)這和我們最初的完整公式是相同的：

其中n選擇不同數(shù)值時(shí)就可以得出不同階的曲線公式。同時(shí)從上面的推導(dǎo)過程也可以知道，不論是幾階曲線，我們都可以完全由一階來表示，而這個(gè)“表示”的過程就是我們?cè)谏厦婵吹降男纬蓜?dòng)畫中那些輔助線。故可以感受下作者自己寫的曲線形成動(dòng)畫中的效果，每段輔助線均由一階曲線形成：

相關(guān)地址

物體跟隨復(fù)雜曲線軌跡運(yùn)動(dòng)

當(dāng)我們知道曲線的公式有何而來之后，如何讓小球沿著曲線運(yùn)動(dòng)就很好理解了。我們生成的每段曲線都是可以用公式表示出來的，也正因如此我們就可以得到每個(gè)t值時(shí)的曲線坐標(biāo)點(diǎn)。從而知道物體的繪制坐標(biāo)。

//核心邏輯
LinearGradient.prototype.drawBall = function() {
    var self = this
    var item = ctrlNodesArr[ctrlDrawIndex] 
    //存儲(chǔ)了各段曲線的控制點(diǎn)
    //各段曲線均為三階貝塞爾，故下面計(jì)算x,y值代入到了三階公式中
    var ctrlAx = item.cAx,//各個(gè)控制點(diǎn)
        ctrlAy = item.cAy,
        ctrlBx = item.cBx,
        ctrlBy = item.cBy,
    ...
    if(item.t > 1) {
        ctrlDrawIndex++ //當(dāng)一段曲線的t>1說明曲線已經(jīng)走到頭
    }else {
        self.ctx.clearRect(0, 0, self.width, self.height)
        item.t += 0.05
        var ballX = ox * Math.pow((1 - item.t), 3) + 3 * ctrlAx * item.t * Math.pow((1 - item.t), 2) + 3 * ctrlBx * Math.pow(item.t, 2) * (1 - item.t) + x * Math.pow(item.t, 3)
        var ballY = oy * Math.pow((1 - item.t), 3) + 3 * ctrlAy * item.t * Math.pow((1 - item.t), 2) + 3 * ctrlBy * Math.pow(item.t, 2) * (1 - item.t) + y * Math.pow(item.t, 3)
        //代入三階貝塞爾曲線公式算出小球的坐標(biāo)值
        self.ctx.beginPath()
        self.ctx.arc(ballX, ballY, 5, 0, Math.PI * 2, false)
        self.ctx.fill()
    }
    if(ctrlDrawIndex !== ctrlNodesArr.length) {
        window.requestAnimationFrame(newMap.drawBall.bind(self))
    }
}

以上是“canvas中如何繪制貝塞爾公式推導(dǎo)與物體跟隨復(fù)雜曲線的軌跡運(yùn)動(dòng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：canvas中如何繪制貝塞爾公式推導(dǎo)與物體跟隨復(fù)雜曲線的軌跡運(yùn)動(dòng)
標(biāo)題路徑：http://chinadenli.net/article8/jhghop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、虛擬主機(jī)、自適應(yīng)網(wǎng)站、搜索引擎優(yōu)化、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

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