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 = "green"  //边线样式
            ctx.lineWide = 4  //边线宽度
            ctx.beginPath()
            ctx.moveTo(120,60)//改变当前坐标为120，60
            ctx.lineTo(20,180)//将当前坐标移动到20，180,并且绘制直线
            ctx.lineTo(220,180)
            ctx.closePath()//最后一线由closePath绘制，闭合路劲
            ctx.stroke()//边线

//            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) //以描边方式绘制矩形
        }
    }
}

Canvas绘制路径 -- 三角形_ide