HTML5 Canvas 绘制股市走势图

分时大盘回顾功能是一种用于分析股票行情的工具,本文就介绍一下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(() => {
    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(...)将上一步计算出的时间线上的位置向下取整,得到整数帧数。

总结