24.Qt Quick QML-Canvas和Context2D详解

1.Canvas介绍

Canvas是一个允许绘制直线和曲线、简单和复杂的形状、图形和引用的图形图像。它还可以添加文本、颜色、阴影、渐变和图案，并执行低级别像素操作。Canvas输出可以另存为图像文件或序列化到URL。例如，以下代码创建一个Canvas项目，该项目具有高度为100像素、宽度为200像素的绘图区域：

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);
    }
} 

目前Canvas项仅支持Context2D。

Canvas常用属性如下所示:

• available : bool,该属性用于设置Canvs是否可用，只有为true时后续的操作才有效；
• canvasSize : size,画布大小,默认情况下，画布大小与当前Canvas的width和height相同.
• context : object,保存活动的绘图上下文。如果画布