Canvas繪制路徑 -- 三角形

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