javascript - 边框上的画布动画线
问题描述
所以我有一个显示一些值的画布元素,我用它window.requestAnimationFrame
来更新画布。现在我想添加一条在画布上循环的动画线。这是我的画布的外观,这是到目前为止该行的代码:
this.ctx.lineWidth = 1;
this.ctx.strokeStyle = 'rgba(47, 48, 63, 0.3)';
this.ctx.setLineDash([]);
this.ctx.beginPath()
this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight)
this.ctx.beginPath()
this.ctx.lineWidth = 5 * this.ratio;
this.ctx.strokeStyle = this._gradient
let topEdge = this._loaderX + this._loaderWidth;
this.ctx.moveTo(this._loaderX, 0);
this.ctx.lineTo(topEdge, 0);
let bottomLeftEdge = topEdge > this.canvasWidth ? topEdge - this.canvasWidth : -this._loaderWidth;
this.ctx.moveTo(this.canvasWidth, bottomLeftEdge)
this.ctx.lineTo(this.canvasWidth, bottomLeftEdge + this._loaderWidth)
this.ctx.stroke()
this._loaderX += 5;
但是当线路到达边缘时会出现问题,它不会进行无缝过渡,不知道我应该如何进行。
解决方案
property vector2d firstPoint: Qt.vector2d(lineWidth / 2, 0)
property vector2d secondPoint: Qt.vector2d(width, lineWidth / 2)
property int lineWidth: 5 * width / height
property int _loaderWidth: width / 2
onPaint:
{
var ctx = getContext("2d")
ctx.reset()
ctx.beginPath()
ctx.lineWidth = lineWidth
ctx.strokeStyle = "green"
var topEdge = this.firstPoint.x + _loaderWidth;
ctx.moveTo(this.firstPoint.x, lineWidth / 2);
ctx.lineTo(topEdge, lineWidth / 2);
var bottomLeftEdge = topEdge > this.width ? topEdge - width : -_loaderWidth;
ctx.moveTo(this.width - lineWidth / 2, bottomLeftEdge - lineWidth / 2)
ctx.lineTo(this.width - lineWidth / 2, bottomLeftEdge - _loaderWidth)
ctx.stroke()
this.firstPoint.x += 5;
}
推荐阅读
- python - 运行 Python 脚本时出错,Web Scraping 代码
- java - 更新数组中的特定对象元素
- python - 我在 AVL 树搜索问题上遇到错误
- flutter - 带有 spaceAround 子列的拉伸行
- python - 根据某些条件将第一次出现保留在一个列中
- php - 列出按分类和子分类分组的帖子
- asynchronous - 为什么延续异步执行?
- python - 在我的带有 python tkinter 的计算器 GUI 中,当我再次编写表达式时,条目小部件中的“错误”消息不会自动删除
- php - 工厂关系返回 null laravel 测试
- sql - Oracle SQL 中需要 12 个未来数字