HTML5 Canvas 绘制股市走势图

2023-04-25 16:48:47 刘煎蛋

前言

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

效果

实现思路

分时大盘回顾中，一天有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(...)将上一步计算出的时间线上的位置向下取整，得到整数帧数。

总结

到此这篇关于HTML5 Canvas 绘制股市走势图的文章就介绍到这了,更多相关HTML5 Canvas股市走势图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！