前言

分時大盤回顧功能是一種用于分析股票行情的工具，在多個股票軟件中都有應(yīng)用。通過這個功能，用戶可以查看一段時間內(nèi)大盤的走勢圖以及漲跌停數(shù)量對比，并回放歷史數(shù)據(jù)。在這個過程中，用戶可以暫停、播放、拖動時間軸等操作，以便在復(fù)盤時更好地分析市場走勢。

效果

實現(xiàn)思路

• 分時大盤回顧中，一天有240個數(shù)據(jù)點。我使用變量currentIndex從0開始配合定時器不斷疊加切換數(shù)據(jù)，在每次清空重繪Canvas時達到視覺動畫效果；暫停、啟動、拖動時間軸等操作均通過控制currentIndex變量完成。
• 紅色的矩形提示有一個緩緩加載的效果，主要是利用rgba將最后一個值從0提升到1的一個過程。
• 在模擬器上，當(dāng)拖動時間軸時，界面不會卡頓。但是在真機上，拖動時間軸會導(dǎo)致界面卡頓的問題。為了解決這一問題，我增加了一個節(jié)流，稀釋了執(zhí)行頻率，以此來降低拖動時間軸所產(chǎn)生的負荷。

啟動、暫停

• 啟動時，將paused置為true。然后，清空畫布并疊加currentIndex，接著重新進行繪制并開啟定時器，重復(fù)上述操作。當(dāng)currentIndex大于等于數(shù)據(jù)長度時，就終止定時器。
• 暫停時將paused置為false即可。

play() {
    const { node } = this;
    if (!this.data.paused) return false;
    if (this.currentIndex >= this.data.list.length - 1) {
        this.triggerEvent('endEvent');
        clearTimeout(this.time);
        return false;
    }
    this.ctx.clearRect(0, 0, node.width, node.height);
    this.currentIndex += 1;
    this.startDraw();
    this.time = setTimeout(this.play.bind(this), 16.667);
},

繪制矩形

矩形文字居中處理方法

首先，使用ctx.measureText(text)方法獲取文字的實際寬度，然后根據(jù)Canvas的大小和文字的寬度計算出文字左上角在Canvas中的坐標(biāo)。具體來說，將Canvas的寬度除以2，減去文字寬度的一半，即可得到文字左上角的橫坐標(biāo)；將Canvas的高度除以2，加上文字高度的一半，即可得到文字左上角的縱坐標(biāo)。

var text = "Hello world!";
var width = ctx.measureText(text).width;
var height = 20; // 假設(shè)文字高度為20px
ctx.font = `${height}px Arial`;
var x = canvas.width / 2 - width / 2;
var y = canvas.height / 2 + height / 2;
ctx.fillText(text, x, y);

矩形緩入效果

要實現(xiàn)Canvas中矩形的透明度從0到1的出現(xiàn)過程，可以使用rgba的最后一個值來控制矩形的透明度，并在每一幀更新矩形的顏色和位置來實現(xiàn)矩形的淡入效果。具體實現(xiàn)步驟如下：

• opacity設(shè)置為0，樣整個矩形就是完全透明的。
• 在每一幀的requestAnimationFrame()調(diào)函數(shù)中，先清空畫布（使用clearRect()方法），然后更新矩形的顏色。
• 每一次更新矩形時，透明度增加一個較小的值，如0.01，當(dāng)透明度變?yōu)?時停止動畫。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var x = canvas.width / 2 - 50; // 矩形位于屏幕中央
var y = canvas.height / 2 - 50;
var width = 100;
var height = 100;
var speed = 2; // 矩形移動速度
var opacity = 0; // 矩形初始透明度為0

function drawRect() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空畫布
    ctx.fillStyle = `rgba(254,82,105, ${opacity})`;
    ctx.fillRect(x, y, width, height); // 繪制矩形

    opacity += 0.01; // 每幀透明度增加0.01，從而使矩形緩慢淡入屏幕
    if (opacity >= 1) {
        cancelAnimationFrame(animation); // 矩形完全進入Canvas后停止動畫
    } else {
        requestAnimationFrame(drawRect); // 繼續(xù)更新狀態(tài)
    }
}

var animation = requestAnimationFrame(drawRect); // 開始動畫循環(huán)

時間軸拖動

在拖動圓點時最主要的就是計算當(dāng)前拖到了哪個時間點，將計算結(jié)果賦值給currentIndex畫布再重新繪制，從而實現(xiàn)拖動回放的效果。

this.throttle(() => {
    const { ctx2, ctx, canvas2, minTime, node } = this;
    const x = e.touches[0].x;
    this.currentIndex = Math.floor(Math.max(minTime, Math.min(240, x / canvas2.width * (240 - minTime))));
    ctx.clearRect(0, 0, node.width, node.height);
    ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
    this.startDraw()
}, 16.667)

currentIndex計算說明

• x / canvas2.width獲取用戶在Canvas上觸摸的x坐標(biāo)除以Canvas的寬度，得到用戶在橫向上的百分比。
• x / canvas2.width * (240 - minTime)將用戶在橫向上的百分比乘以最大幀數(shù)和最小幀數(shù)之差，得到時間線上的位置（總共240幀，minTime為最小時間）。
• Math.min(240, ...)將上一步計算出的時間線上的位置與240取最小值，確保時間線上的位置不會超過最大幀數(shù)。
• Math.max(minTime, ...)將上一步計算出的時間線上的位置與最小時間取最大值，確保時間線上的位置不會低于最小幀數(shù)。
• Math.floor(...)將上一步計算出的時間線上的位置向下取整，得到整數(shù)幀數(shù)。

總結(jié)

到此這篇關(guān)于HTML5 Canvas 繪制股市走勢圖的文章就介紹到這了,更多相關(guān)HTML5 Canvas股市走勢圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論