Javascript Qt 2D画布和HTML5画布的行为并不相同

我已经编写了一些Javascript代码，并使用HTML5画布和Qt的QML 2D画布对其进行了测试。令我惊讶的是，他们的行为完全不同，我不明白为什么。HTML5代码使矩形以螺旋状运动旋转，而QML代码使其在x方向旋转和移动

HTML5/Javascipt代码：

您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
变量xOffset=50
var yOffset=50
var xLength=100
变量长度=100
变量xCenter=xOffset+xLength/2
变量Y中心=Y偏移+Y长度/2
变量角度=0
函数旋转正方形（xCenter、xCenter、宽度、高度、角度增量）
{
ctx.save（）
ctx.translate（xCenter，yCenter）
ctx.旋转（角度*Math.PI/180）
ctx.translate（-xCenter，-cCenter）
ctx.clearRect（xOffset、yOffset、宽度、高度）
var newAngle
新角度=角度+角度增量
新角度%=360
var增量=三角洲角度（新角度，角度）
ctx.translate（xCenter，yCenter）
ctx.旋转（增量*Math.PI/180）
ctx.translate（-xCenter，-cCenter）
fillRect（xOffset++，yOffset，width，height）
角度=新角度
ctx.restore（）
}
函数三角洲角（当前、上一个）
{
如果（当前>=上一个）
{
返回当前-上一个
}
其他的
{
返回（360+当前）-上一个
}
}
设置间隔（“旋转正方形（X中心，Y中心，X长度，Y长度，1）”，20）；

要获得与HTML中相同的效果，请将组件初始化修改为：

Component.onCompleted: {
    ctx = getContext("2d")

    xCenter = xOffset + xLength / 2
    yCenter = yOffset + yLength / 2
}

在QML中，当您说：

property int xCenter: xOffset + xLength / 2

您创建了一个属性绑定——每当xOffset或xLength更改时，xCenter也会更改，并且您在呈现代码中修改了xOffset，因此它的效果与JavaScript不同——xCenter只计算一次，永远不会更改

我以编程方式给出的代码为

xCenter

属性指定了一个值，这将清除它可能具有的任何绑定，因此它不再更改