渐变

画布(Canvas)可以用颜色填充形状，也可以用渐变或图像填充形状。

onPaint: {
    var ctx = getContext("2d")

    var gradient = ctx.createLinearGradient(100,0,100,200)
    gradient.addColorStop(0, "blue")
    gradient.addColorStop(0.5, "lightsteelblue")
    ctx.fillStyle = gradient
    ctx.fillRect(50,50,100,100)
}

这个例子中，渐变是沿着起点(100,0)到终点(100,200)定义的，在画布中间给出一条垂直线。 渐变停靠点(gradient-stops)可以定义为从0.0（渐变起点）到1.0（渐变终点）之间对应的颜色。 这里在0.0(100,0)处使用blue颜色，在0.5(100,200)处使用lightsteelblue颜色。 渐变被定义为比要绘制的矩形大得多，因此矩形将渐变剪切到它定义的几何图形。

提示

渐变是在画布(Canvas)坐标中定义的，而不是相对于要绘制的路径的坐标。 画布没有相对坐标的概念，正如现在在QML中习惯的那样。