Холст анимированная линия над границей

Question

, поэтому у меня есть элемент canvas, который отображает некоторые значения, я использую 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;

Но проблема возникает, когда линия достигает края, она не делаетплавный переход, не уверен, как мне поступить.

Answer 1

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;                                                     
}