微信小程序中如何使用canvas制作K線

這篇文章主要介紹了微信小程序中如何使用canvas制作K線，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

前言：

我們目的是想要一條平滑的曲線來(lái)表示均線等，而不是一條轉(zhuǎn)折點(diǎn)明顯的折線。因此還得繼續(xù)探索api。我們發(fā)現(xiàn)，在canvas API中，能夠畫(huà)出曲線的有2個(gè)

beZierCurveTo(num1, num2, num3, num4, x, y)quadraticCurveTo(num1, num2, x, y)

這兩個(gè)api都是通過(guò)貝塞爾曲線來(lái)繪制路徑。好在學(xué)習(xí)PS的時(shí)候，對(duì)貝塞爾曲線的具體表現(xiàn)也是有一定的熟練程度的，因此知道要確定一條由多個(gè)點(diǎn)組成的曲線路徑，每一個(gè)轉(zhuǎn)折點(diǎn)都得有2個(gè)控制點(diǎn)來(lái)控制曲線的表現(xiàn)

而在曲線的起點(diǎn)和終點(diǎn)，就只能有一個(gè)控制點(diǎn)了。因此，我們?cè)诶L制起點(diǎn)和終點(diǎn)時(shí)，得使用quadraticCurveTo，繪制中間的點(diǎn)，則使用beZierCurveTo。

現(xiàn)在的難點(diǎn)是，如何通過(guò)已知的要經(jīng)過(guò)的點(diǎn)，計(jì)算出他們的控制點(diǎn)？

為了找到一個(gè)行之有效的公式，于是草稿走起。

沒(méi)想到告別高中數(shù)學(xué)那么多年，憑著一點(diǎn)點(diǎn)的記憶，花了一上午，強(qiáng)行搞了一個(gè)公式出來(lái)，我想如果我還是高中的數(shù)學(xué)水平的話，估計(jì)也就10分鐘就能懟出來(lái)了，汗！

不知道大家還記不記得切線的概念，如果我們要畫(huà)一條貝塞爾曲線，M[i-1]是起點(diǎn)，M[i]是終點(diǎn)，另外的兩個(gè)控制點(diǎn)為A1, A2，這2個(gè)控制點(diǎn)一定會(huì)在某一個(gè)曲面的切線上，而切線則可以由三個(gè)點(diǎn)來(lái)確定，如我的草稿中，最上面橘黃色的線條就是切線，我們只需要在這條切線上，隨意取2個(gè)點(diǎn)，分別作為前后曲線的控制點(diǎn)即可

于是，經(jīng)過(guò)我長(zhǎng)時(shí)間的思考，總結(jié)了一個(gè)公式如下

A1[M[i-1][0] + a*(M[i][0] - M[i-2][0]), M[i-1][1] + b*(M[i][1] - M[i-2][1])]A2[M[i][0] - b*(M[i+1][0] - M[i-1][0]), M[i][1] - b*(M[i+1][1] - M[i-1][1])]

其中系數(shù)a, b是一個(gè)根據(jù)情況我隨意取的一個(gè)值，我試過(guò)，建議在0.3附近取值并調(diào)試，試試看具體效果再確定

第一個(gè)點(diǎn)和最后一點(diǎn)因?yàn)闊o(wú)法通過(guò)這種方式取得2個(gè)控制點(diǎn)，因此我就在點(diǎn)集合的前后各加了一個(gè)隨意自定自定的點(diǎn)，在實(shí)際遍歷的時(shí)候忽略他們即可。

整理了思路，具體實(shí)現(xiàn)如下

bezierLine (canvasId, options) {let windowWidth = 0wx.getSystemInfo({ success (result) { windowWidth = result.windowWidth }})let a = windowWidth / (options.xAxis.length-1)let data = []options.xAxis.map((item, i) => { data.push([i * a, 200 - options.yAxis[i]])})data.unshift(data[0])data.push(data[data.length - 1])const ctx = wx.createCanvasContext(canvasId)ctx.beginPath()data.map((item, i) => { const a = 0.25 const b = 0.25 if (i == 0 || i == data.length - 1) { // do nothing } else if (i == 1) { ctx.moveTo(item[0], item[1]) } else { const a1 = data[i - 1][0] + a * (data[i][0] - data[i - 2][0]) const a2 = data[i - 1][1] + b * (data[i][1] - data[i - 2][1]) const b1 = data[i][0] - b * (data[i + 1][0] - data[i - 1][0]) const b2 = data[i][1] - b * (data[i + 1][1] - data[i - 1][1]) ctx.bezierCurveTo(a1, a2, b1, b2, item[0], item[1]) }})ctx.setLineWidth(1)ctx.setStrokeStyle('red')ctx.stroke()ctx.draw()}// 在onLoad中調(diào)用this.bezierLine('stage', { xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30], yAxis: [11, 33, 22, 32, 14, 15, 20, 60, 23, 44, 77, 122, 133, 89, 156, 122,128, 143, 111, 101, 132, 99, 98, 44, 62, 74, 111, 13, 42, 55]})

oh yeah! 效果還可以，以后再也不用擔(dān)心曲線的繪制了，理我們的k線圖又近了一步

ps: 數(shù)據(jù)的組織形式可以多種多樣，可以是數(shù)組，可以是二位數(shù)組，也可以是對(duì)象，這并不是最主要的點(diǎn)，只要能正確處理就行了

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序中如何使用canvas制作K線”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!