QML中的Canvas绘图---渐变

QML中的Canvas的画布功能其实和js以及h5的Canvas基本一样，以下是我使用QML的Canvas绘出渐变效果的代码，在过程中出现的几个问题，都是由几个关键的数据控制的，这个一般在网上和帮助文档都很少有资料，记录下

//mainView's right view background,the size is fix
import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Window 2.2

Rectangle {
    width: 1364
    height: 1080
    border.width: 0
    color: "transparent";
    Canvas{
        id:myCanvas;
        anchors.fill: parent;
        onPaint: {
            var ctx = myCanvas.getContext("2d");
            var grd = ctx.createLinearGradient(0,0,1364,0);  //设置渐变的范围 x,y,x1,y1
            //由于设置的时两个，所有只有两种，当设置出现的三个的时候，会正常 1-2-3类型的显示渐变（渐变的属性时根据设置的颜色的值的变化，r，g，b，a）
            grd.addColorStop(0.0,Qt.rgba(0,0,0,0));
            grd.addColorStop(0.32,Qt.rgba(0,0,0,0.75));//渐变设置到40%的位置时停止
            grd.addColorStop(1.0,Qt.rgba(0,0,0,0.75));//渐变设置到100%的位置时停止
            ctx.fillStyle = grd;
            ctx.beginPath();
            //可去除边框
            ctx.fillRect(0,0,1364,1080);
            //不可去除边框
//            ctx.rect(0,0,1364,1080);;
//            ctx.fill();
            ctx.stroke();
        }
        Component.onCompleted: {
            requestPaint();
        }
    }
}

createLinearGradient()函数里面的参数分别是x,y,x1,y1，对此特意测试过，当x和x1相同时，实现的渐变是上下矩形形状的渐变，同理y和y1相同时，实现的渐变是左右矩形形状的渐变，当两者都不相同的时候，实现的是对角线类型的渐变。

第二个就是onPaint信号的问题，Canvas提供paint信号，只有在发出requestPaint()信号的时候，才会调用onPaint的内容。

第三个就是绘出的图形带有边框的问题，这个问题可以看上面的代码的注释部分，fillRect()与fill()，rect()函数之间的区别，个人理解是，fillRect()字面意思就是填充rect，而不是先画出rect，再fill，是直接跳过画rect，进行fill对应的rect区域