Canvas（一-QML绘图基本概念）

画布元素（canvas element）的基本思想是使用一个2D对象来渲染路径。
这个2D 对象包括了必要的绘图函数！画布元素（canvas element）充当绘制画布。
2D对象支持画笔，填充，渐变，文本和绘制路径创建命令。

画一个简单的填充矩形：

获取 2d 对象的代码：

var ctx = getContext("2d")

渲染路径的代码：

// 线条宽度为 4
ctx.lineWidth = 4
// 画笔样式为蓝色
ctx.strokeStyle = "blue"
// 填充风格我 steelblue
ctx.fillStyle = "steelblue"

路径代码：

ctx.beginPath()
ctx.moveTo(50,50)
ctx.lineTo(150,50)
ctx.lineTo(150,150)
ctx.lineTo(50,150)
ctx.closePath()

完整代码：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item {
        id: root
        anchors.fill: parent
        Canvas{

            // 画布尺寸
            width: 200
            height: 200

            // 重写 onPaint
            onPaint: {
                var ctx = getContext("2d")
                
                // 线条宽度为 4
                ctx.lineWidth = 4
                // 画笔样式为蓝色
                ctx.strokeStyle = "blue"
                // 填充风格我 steelblue
                ctx.fillStyle = "steelblue"

                ctx.beginPath()
                ctx.moveTo(50,50)
                ctx.lineTo(150,50)
                ctx.lineTo(150,150)
                ctx.lineTo(50,150)
                ctx.closePath()

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

注意：

• 只有调用 stroke或者fill函数，创建的路径才会绘制，它们与其它的函数使用是相互独立的。
• 调用stroke或者fill将会绘制当前的路径，创建的路径是不可重用的，只有绘制状态 能够被存储和恢复
• 在QML中，画布元素（canvas element）充当了绘制的容器。2D绘制对象提供了 实际绘制的方法。绘制需要在onPaint事件中完成。