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: {
            //绘制圆弧
            //arc(x,y,radius,startAngle,endAngle,anticlockwise)  anticlockwise  为true,角以逆时针方向旋转。反之顺时针方向。
            //arcTo(x1,y1,x2,y2,radius) 以当前点和x2,y2为起点，以(x1,y1)为终点，radius为半径，绘制两条线的切圆，函数返回时为x2,y2点

            var ctx = getContext("2d");
            ctx.lineWide = 4  //边线宽度
            ctx.beginPath()
            ctx.moveTo(20,20)//改变当前坐标为20，20
            ctx.lineTo(100,20)//将当前坐标移动到100，20,并且绘制直线
            ctx.arcTo(150,20,150,70,50)
            ctx.lineTo(150,120)
            ctx.stroke()//边线

//            ctx.beginPath()
//            ctx.moveTo(30,60)
            //ctx.arc(30,60,20,0,-Math.PI/2,true)
            //ctx.arc(30,60,20,0,Math.PI,true)
            //ctx.arc(30,60,20,0,-3*Math.PI/2,true)
//            ctx.arc(30,60,20,0,2*Math.PI,false)//顺时针
//            ctx.stroke()
//            ctx.closePath()

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