学习Qt的QML的Canvas（一） ---（参考书籍《Qt Quick 核心编程-安晓辉》）

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Window 2.2

Rectangle {
    visible: true
    width: 600;height: 600;

    Canvas{
        width: 400;
        height: 240;
        contextType: "2d";

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

            ctx.lineWidth = 2;
            ctx.strokeStyle = "red";

            var gradient = ctx.createLinearGradient(60,50,180,130);
            gradient.addColorStop(0.0,Qt.rgba(1,0,0,1.0));
            gradient.addColorStop(1.0,Qt.rgba(0,0,1,1.0));

            ctx.fillStyle = gradient;
            ctx.beginPath();
            ctx.rect(60,50,120,80);
            ctx.fill();
            ctx.stroke();

            gradient = ctx.createLinearGradient(230,160,30,260,200,20);
            gradient.addColorStop(0.0,Qt.rgba(1,0,0,1.0));
            gradient.addColorStop(1.0,Qt.rgba(0,0,1,1.0));
            ctx.fillStyle = gradient;
            ctx.beginPath();
//            ctx.rect(200,140,80,80);
            ctx.moveTo(200,80); //start point
            ctx.lineTo(200,200);
            ctx.lineTo(300,200)

            //
//            ctx.moveTo(200,200);
//            ctx.lineTo(200,80); //start point
//            ctx.lineTo(300,200)

            ctx.fill();
            ctx.stroke();
        }
    }

    Gradient{

    }

}