Canvas 基本绘制举例

1. 通过 fillText 绘制文字

onPaint: {
    var ctx = getContext('2d');
    ctx.font="50px";
    ctx.fillText("qteveloper", 10, 10);
    ctx.font="20px";
    ctx.strokeText("qteveloper.blogspot.com", 50, 200);
    
}

2. 通过 lineTo 绘制线条

onPaint: {
   var ctx = getContext("2d")
    ctx.save()

    ctx.lineWidth = 2;
    ctx.strokeStyle = "red"

    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.lineTo(50, 100)
    ctx.stroke()

    ctx.restore()
}

3. 通过lineTo绘制箭头

onPaint: {
    var ctx = getContext('2d')
    ctx.save()
    var centy = parent.height / 2 
   
    var xpos = parent.width - 20
    var ypos = centy
    console.log("xpos=", xpos)
    console.log("ypos=", ypos)
    
    ctx.beginPath()
    ctx.fillStyle