第25篇 进阶（二十五）画布元素 之 渐变（Gradients）

画布中可以使用颜色填充，也可以使用渐变。

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 400
    height: 400

    Canvas {
        id: canvas
        width: 400
        height: 400

        //onPaint事件中完成路径绘制。
        onPaint: {
            var ctx = getContext("2d")     //装载画笔
            //定义一条渐变线（点1，点2）
            var gradient = ctx.createLinearGradient(150,100,150,200)
            gradient.addColorStop(0,"blue")
            gradient.addColorStop(0.5,"lightsteelblue")

            ctx.fillStyle = gradient
            ctx.fillRect(100,100,100,100)
        }
    }
}

结果展示：

 渐变色定义点为：开始点(150,100)，结束点：(150,200)，使用蓝色作为0.0。画布中没有相对坐标的概念。