QML之HTML5画布移植（Porting from HTML5 Canvas）

在QML中，我们可以使用Canvas元素来绘制图形。以下是一个简单的例子，展示如何在QML中创建一个类似于HTML5 Canvas的应用。

import QtQuick 2.0
 
Rectangle {
    width: 300
    height: 200
    color: "lightgray"
 
    Canvas {
        id: canvas
        anchors.centerIn: parent
        width: 100
        height: 100
        onPaint: {
            var ctx = getContext("2d");
            ctx.fillStyle = "blue";
            ctx.beginPath();
            ctx.arc(50, 50, 40, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        }
    }
}

在这个例子中，我们创建了一个Canvas，并在其onPaint事件处理函数中定义了绘制一个蓝色的圆形的过程。当Canvas组件需要重绘时（例如，窗口大小调整导致重新绘制），就会调用onPaint事件处理函数。这个例子展示了如何在QML中使用Canvas来创建2D图形。