本文共 1890 字，大约阅读时间需要 6 分钟。

目录

官方解析

        Canvas可以用于画直线或曲线，简单或复杂的形状，图形，图片，并且他能加文字，颜色，阴影，和颜色梯度，和其他的装饰，可以进行低像素操作。Canvas可以保存成图像文件，或者有序列号的URL。

import QtQuick 2.0  Canvas {      id: mycanvas      width: 100      height: 200      onPaint: {          var ctx = getContext("2d");          ctx.fillStyle = Qt.rgba(1, 0, 0, 1);          ctx.fillRect(0, 0, width, height);      }  }

博主例子

这里提供两个例子，一个例子是官方例子，一个是自己写的小栗子

例子运行截图如下：

程序的结构如下：

源码如下：

main.cpp

#include 
   
    #include 
    
     #include 
     
      int main(int argc, char *argv[]){    QApplication a(argc, argv);    QQmlApplicationEngine engine;    engine.load(QUrl("qrc:/main.qml"));    if(engine.rootObjects().isEmpty()){        qDebug() << "engine load failed!";        return -1;    }    return a.exec();}
     
    
   

main.qml

import QtQuick 2.7import QtQuick.Controls 2.0ApplicationWindow {    visible: true    width: 800    height: 600    MyCanvas{        id: myCanvas    }    MyCanvas2{        id: myCanvas2        anchors.centerIn: parent    }}

MyCanvas.qml

import QtQuick 2.0Canvas{    id: myCanvas    width: 100    height: 200    onPaint: {        var ctx = getContext("2d");        ctx.fillStyle = Qt.rgba(1, 1, 0, 1);        ctx.fillRect(0, 0, width, height);    }}

MyCanvas2.qml

import QtQuick 2.0Canvas{    property real radius: 100    property color arcColor: "#EE3A8C"    id: myCanvas2    width: 2 * radius + 5    height: 2 * radius + 5    Text{        anchors.centerIn: parent        font.pointSize: 15        text: qsTr("中文")    }    onPaint: {        var ctx = getContext("2d")        ctx.clearRect(0, 0, width, height);        ctx.beginPath()        ctx.strokeStyle = arcColor        ctx.lineWidth = 2        ctx.arc(width/2, height/2, radius, 0, Math.PI*2, true)        ctx.stroke()    }}

转载地址：https://it1995.blog.csdn.net/article/details/86161675 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！