Canvas绘制路径--注意使用beginPath()

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    //绘制路径，以beginPath开始，以closePath结束，每次调用beginPath时，若之前未调用closePath,则会自动调用closePath
    Canvas{
        id:mycanvas
        width: 640
        height: 400
        onPaint: {
            var ctx = getContext("2d");
            ctx.strokeStyle = Qt.rgba(0.1,0.1,0.1,0.2)//边线
            ctx.lineWidth = 4  //边线宽度
            ctx.beginPath()

            for(var i = 0; i < 5;++i)
            {   //新的路径会在之前路径上叠加
                ctx.rect(10+i*20,10+i*20,210-i*40,210-i*40)
                ctx.stroke()//边线
            }

            for(var j = 0;j < 5;++j)
            {
                ctx.beginPath()//每次在之前都会自动调用closePath
                ctx.rect(240+j*20,10+j*20,210-j*40,210 - j*40)
                ctx.stroke();
            }

//            ctx.fillStyle = "black"//填充
//            ctx.font = "bold 50px Arial"
//            var text = "Hello World"
//            context.fillText(text,10,80)//文字在左上角位置，填充文本
//            context.strokeText(text,10,150)

//            ctx.fillRect(10,10,50,50)//第一个矩形
//            ctx.save()
//            ctx.fillStyle = ctx.createPattern("red",Qt.Dense1Pattern)//创建单色,红色纹理
//            ctx.fillRect(70,10,50,50)//第二个矩形
//            ctx.restore()//栈中弹出第一个保存属性
//            ctx.fillRect(130,10,50,50)

//            ctx.strokeStyle = "blue"//边线
//            ctx.lineWidth = 4  //边线宽度
//            ctx.lineJoin = "round" //边线连接样式（圆弧将拐角连接起来）
//            ctx.fillRect(20,20,160,160) //填充矩形
//            ctx.clearRect(30,30,140,140)//清空矩形
//            ctx.strokeRect(20,20,80,80) //以描边方式绘制矩形
        }
    }
}