qml Canvas（一）

quick 中控件都在窗口中显示，所以如果你需要使用画布必须在一个窗口中定义
画布的实现的方式有2种：

第一种：这种是通过getContsxt()方法获得obj

// transform.qml

import QtQuick 2.5
import QtQuick.Window 2.0
Window{
    visible: true;
    width: 800;
    height: 500;
    //定义Canvas obj
    Canvas {
        width: 400
        height: 240
        //onpaint signal处理器
        onPaint: {
            //获取Context2D对象z
            var ct = getContext("2d");
            ct.lineWidth=2;
            ct.strokeStyle="red";
            //画刷
            ct.fillStyle="blue";
            ct.beginPath();
            ct.rect(100,80,120,80);
            ct.fill();
            ct.stroke();

        }
    }
}

第二种： 设置contextType: “2d”

// transform.qml

import QtQuick 2.5
import QtQuick.Window 2.0
Window{
    visible: true;
    width: 800;
    height: 500;
    //定义Canvas obj
    Canvas {
        width: 400
        height: 240
        contextType: "2d"
        onPaint: {
            context.lineWidth=2;
            context.strokeStyle="red";
            context.fillStyle="blue";
            context.beginPath();
            context.rect(100,80,120,80);
            context.fill();
            context.stroke();

        }
    }
}

Context2D有两个方法，createLinearGradient(线性渐变对象) createRadialGradient(放射渐变对象)

import QtQuick 2.5
import QtQuick.Window 2.0
Window{
    visible: true;
    width: 800;
    height: 500;
    Canvas {
        width: 400
        height: 240
        onPaint: {
            var ct = getContext("2d");
            ct.lineWidth=7;
            ct.strokeStyle="red";
            var gradient=ct.createLinearGradient(60,50,180,130);
            gradient.addColorStop(0.0,Qt.rgba(1,0,0,1.0));
            gradient.addColorStop(0.0,Qt.rgba(0,0,1,1.0));
            ct.fillStyle=gradient;
            ct.beginPath();
            ct.rect(60,50,80,80);
            ct.fill();
            ct.stroke();


            gradient=ct.createRadialGradient(230,160,30,260,200,20);
            gradient.addColorStop(0.0,Qt.rgba(1,0,0,1.0));
            gradient.addColorStop(0.0,Qt.rgba(0,0,1,1.0));
            ct.fillStyle=gradient;
            ct.beginPath();
            ct.rect(200,140,80,80);
            ct.fill();
            ct.stroke();

        }
    }
}

画三角：

import QtQuick 2.5
import QtQuick.Window 2.0
Window{
    visible: true;
    width: 800;
    height: 500;
    Canvas {
        width: 400
        height: 240
        onPaint: {
            var ct = getContext("2d");
            ct.lineWidth=7;
            ct.strokeStyle="red";
            ct.fillStyle="blue";
            ct.beginPath();
            //开启new load
            ct.moveTo(100,80);
            ct.lineTo(100,200);
            ct.lineTo(300,200); 
            //结束 并完成斜边的绘制
            ct.closePath();
            ct.fill();
            ct.stroke();

        }
    }
}

绘制文本：

import QtQuick 2.5
import QtQuick.Window 2.0
Window{
    visible: true;
    width: 800;
    height: 500;
    Canvas {
        width: 400
        height: 240
        onPaint: {
            var ct = getContext("2d");
            ct.lineWidth=7;
            ct.strokeStyle="red";
            ct.font="42px sans-serif";
            var gradient=ct.createLinearGradient(0,0,width,height);
            gradient.addColorStop(0.0,Qt.rgba(0,1,0,1));
            gradient.addColorStop(1.0,Qt.rgba(0,0,1,1));
            ct.fillStyle=gradient;
            ct.beginPath();
            ct.text("wang zhang",10,50);
            ct.fill();
            
            ct.strokeText("OKOK",10,100);
            
            ct.strokeText("OPOPOPOPOP",10,150);
            ct.fillText("OPOPOPOPOP",10,150);




        }
    }
}