前言
分时大盘回顾功能是一种用于分析股票行情的工具，在多个股票软件中都有应用。通过这个功能，用户可以查看一段时间内大盘的走势图以及涨跌停数量对比，并回放历史数据。在这个过程中，用户可以暂停、播放、拖动时间轴等操作，以便在复盘时更好地分析市场走势。
效果
实现思路
- 分时大盘回顾中，一天有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(...)将上一步计算出的时间线上的位置向下取整，得到整数帧数。
总结
到此这篇关于HTML5 Canvas 绘制股市走势图的文章就介绍到这了,更多相关HTML5 Canvas股市走势图内容请搜索 『沙漠渔溏』 以前的文章或继续浏览下面的相关文章，希望大家以后多多支持 『沙漠渔溏』 ！