qml canvas

---

基本绘图

//main.qml

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    
    
    visible: true
    width: 800
    height: 600
    title: qsTr("Hello World")
    Canvas {
    
    
        id : canvas
        anchors.fill: parent
        width: 740
        height: 680
        onPaint: {
    
    
            var ctx = getContext("2d");
            ctx.save();                 //保存画笔设置
            ctx.beginPath();            //开始绘制
            ctx.lineWidth = 20;         //画笔宽度
            ctx.strokeStyle="#000000";  //画笔颜色
            ctx.moveTo(0, 0);           //画笔起始点
            ctx.lineTo(50, 100);        //绘制一条线
            ctx.stroke();               //绘制
            ctx.restore();              //还原上一次保存的画笔设置

            ctx.save();                 //保存画笔设置
            ctx.beginPath();            //开始绘制
            ctx.lineWidth = 20;         //画笔宽度
            ctx.strokeStyle="#57FF0C";  //画笔颜色
            ctx.moveTo(0, 0);           //画笔起始点
            ctx.lineTo(50, 50);         //绘制一条线
            ctx.stroke();               //绘制
            ctx.restore();              //还原上一次保存的画笔设置
        }
    }
}

画笔设置值save()和restore()函数会影响以下属性值
strokeStyle
fillStyle
fillRule
globalAlpha
lineWidth
lineCap
lineJoin
miterLimit
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
globalCompositeOperation
font
textAlign
textBaseline