HTML5 Canvas 绘制股市走势图

前言分时大盘回顾功能是一种用于分析股票行情的工具，在多个股票软件中都有应用。通过这个功能，用户可以查看一段时间内大盘的走势图以及涨跌停数量对比，并回放历史数据

前言

分时大盘回顾功能是一种用于分析股票行情的工具，在多个股票软件中都有应用。通过这个功能，用户可以查看一段时间内大盘的走势图以及涨跌停数量对比，并回放历史数据。在这个过程中，用户可以暂停、播放、拖动时间轴等操作，以便在复盘时更好地分析市场走势。

效果

实现思路

分时大盘回顾中，一天有240个数据点。我使用变量currentIndex从0开始配合定时器不断叠加切换数据，在每次清空重绘Canvas时达到视觉动画效果；暂停、启动、拖动时间轴等操作均通过控制currentIndex变量完成。
红色的矩形提示有一个缓缓加载的效果，主要是利用rgba将最后一个值从0提升到1的一个过程。
在模拟器上，当拖动时间轴时，界面不会卡顿。但是在真机上，拖动时间轴会导致界面卡顿的问题。为了解决这一问题，我增加了一个节流，稀释了执行频率，以此来降低拖动时间轴所产生的负荷。

启动、暂停

启动时，将paused置为true。然后，清空画布并叠加currentIndex，接着重新进行绘制并开启定时器，重复上述操作。当currentIndex大于等于数据长度时，就终止定时器。
暂停时将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)方法获取文字的实际宽度，然后根据Canvas的大小和文字的宽度计算出文字左上角在Canvas中的坐标。具体来说，将Canvas的宽度除以2，减去文字宽度的一半，即可得到文字左上角的横坐标；将Canvas的高度除以2，加上文字高度的一半，即可得到文字左上角的纵坐标。

var text = "Hello world!";
var width = ctx.measureText(text).width;
var height = 20; // 假设文字高度为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);

矩形缓入效果

要实现Canvas中矩形的透明度从0到1的出现过程，可以使用rgba的最后一个值来控制矩形的透明度，并在每一帧更新矩形的颜色和位置来实现矩形的淡入效果。具体实现步骤如下：

opacity设置为0，样整个矩形就是完全透明的。
在每一帧的requestAnimationFrame()调函数中，先清空画布（使用clearRect()方法），然后更新矩形的颜色。
每一次更新矩形时，透明度增加一个较小的值，如0.01，当透明度变为1时停止动画。

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); // 继续更新状态
    }
}

var animation = requestAnimationFrame(drawRect); // 开始动画循环

时间轴拖动

在拖动圆点时最主要的就是计算当前拖到了哪个时间点，将计算结果赋值给currentIndex画布再重新绘制，从而实现拖动回放的效果。

this.throttle(() =&gt; {
    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坐标除以Canvas的宽度，得到用户在横向上的百分比。
x / canvas2.width * (240 - minTime)将用户在横向上的百分比乘以最大帧数和最小帧数之差，得到时间线上的位置（总共240帧，minTime为最小时间）。
Math.min(240, ...)将上一步计算出的时间线上的位置与240取最小值，确保时间线上的位置不会超过最大帧数。
Math.max(minTime, ...)将上一步计算出的时间线上的位置与最小时间取最大值，确保时间线上的位置不会低于最小帧数。
Math.floor(...)将上一步计算出的时间线上的位置向下取整，得到整数帧数。