前言
分时大盘回顾功能是一种用于分析股票行情的工具，在多个股票软件中都有应用。通过这个功能，用户可以查看一段时间内大盘的走势图以及涨跌停数量对比，并回放汗青数据。在这个过程中，用户可以停息、播放、拖动时间轴等操作，以便在复盘时更好地分析市场走势。
效果
实现思路
- 分时大盘回顾中，一天有240个数据点。我使用变量[code]currentIndex[/code]从0开始共同定时器不断叠加切换数据，在每次清空重绘Canvas时到达视觉动画效果；停息、启动、拖动时间轴等操作均通过控制[code]currentIndex[/code]变量完成。
- 红色的矩形提示有一个徐徐加载的效果，重要是使用rgba将末了一个值从0提拔到1的一个过程。
- 在模拟器上，当拖动时间轴时，界面不会卡顿。但是在真机上，拖动时间轴会导致界面卡顿的问题。为了解决这一问题，我增加了一个节流，稀释了实行频率，以此来降低拖动时间轴所产生的负荷。
启动、停息
- 启动时，将[code]paused[/code]置为true。然后，清空画布并叠加[code]currentIndex[/code]，接着重新进行绘制并开启定时器，重复上述操作。当[code]currentIndex[/code]大于便是数据长度时，就停止定时器。
- 停息时将[code]paused[/code]置为false即可。
[code]
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);
},
[/code]
绘制矩形
矩形笔墨居中处理方法
起首，使用[code]ctx.measureText(text)[/code]方法获取笔墨的现实宽度，然后根据Canvas的大小和笔墨的宽度计算出笔墨左上角在Canvas中的坐标。详细来说，将Canvas的宽度除以2，减去笔墨宽度的一半，即可得到笔墨左上角的横坐标；将Canvas的高度除以2，加上笔墨高度的一半，即可得到笔墨左上角的纵坐标。
[code]
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);
[/code]
矩形缓入效果
要实现Canvas中矩形的透明度从0到1的出现过程，可以使用[code]rgba[/code]的末了一个值来控制矩形的透明度，并在每一帧更新矩形的颜色和位置来实现矩形的淡入效果。详细实现步骤如下：
- opacity设置为0，样整个矩形就是完全透明的。
- 在每一帧的[code]requestAnimationFrame()[/code]调函数中，先清空画布（使用clearRect()方法），然后更新矩形的颜色。
- 每一次更新矩形时，透明度增加一个较小的值，如0.01，当透明度变为1时克制动画。
[code]
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); // 开始动画循环
[/code]
时间轴拖动
在拖动圆点时最重要的就是计算当前拖到了哪个时间点，将计算效果赋值给[code]currentIndex[/code]画布再重新绘制，从而实现拖动回放的效果。
[code]
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)
[/code]
currentIndex计算说明
- [code]x / canvas2.width[/code]获取用户在Canvas上触摸的x坐标除以Canvas的宽度，得到用户在横向上的百分比。
- [code]x / canvas2.width * (240 - minTime)[/code]将用户在横向上的百分比乘以最大帧数和最小帧数之差，得到时间线上的位置（总共240帧，minTime为最小时间）。
- [code]Math.min(240, ...)[/code]将上一步计算出的时间线上的位置与240取最小值，确保时间线上的位置不会超过最大帧数。
- [code]Math.max(minTime, ...)[/code]将上一步计算出的时间线上的位置与最小时间取最大值，确保时间线上的位置不会低于最小帧数。
- [code]Math.floor(...)[/code]将上一步计算出的时间线上的位置向下取整，得到整数帧数。
总结
到此这篇关于HTML5 Canvas 绘制股市走势图的文章就介绍到这了,更多相干HTML5 Canvas股市走势图内容请搜刮脚本之家以前的文章或继续欣赏下面的相干文章，盼望大家以后多多支持脚本之家！
来源：https://www.jb51.net/html5/877615.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
