★9.4 Qml Canvas介绍

返回目录：

Qt QML专栏目录结构_qml 项目 目录-CSDN博客

★9.4 Qml Canvas介绍

Qml中提供了Canvas组件，接口和html中的Canvas基本一致，可以直接copy html中的Canvas代码(极少部分不能用)。

当然QPainter实现的功能，也都可以移植到Canvas中。

Canvas渲染性能并不太好，如果有性能要求，还是不要用Canvas了。

这里示例绘制一个笑脸

//main.qml
import QtQuick 2.0
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello Canvas")
    Canvas {
        id: canvas
        anchors.fill: parent
        onPaint: {
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
            ctx.moveTo(110,75);
            ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
            ctx.moveTo(65,65);
            ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
            ctx.moveTo(95,65);
            ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
            ctx.stroke();
        }
    }
}