1. QML Canvas基本绘制

在QWidget中，在函数paintEvent()中，新建QPainter对象，实现窗体上的绘制，而在Quick中，就需要使用Canvas画布来实现，基本思路与QPainter如出一辙，Canvas是HTML5新增的，可以使用javaScript脚本语言在其中绘制的HTML元素，他可以实现照片，动画，以及实时视频的渲染，本文只讲基本元素的绘制

1.1 两个基本属性

- [1] fill与stroke,前者表示以填充方式绘制，后者表示只绘制其轮廓 - [2] fillStyle与strokeStyle，前者定义填充样式，后者定义轮廓样式上述两种，可以理解为QPainter对象的Pen和Brush,表现方式也和Pen Brush一样

2 在Canvas上绘制基本元素

本文举例在Canvas上绘制线条/矩形/闭合曲线/圆弧/文本等等基本元素

2.1 在Canvas中绘制最简单的矩形

    ctx.fillStyle = "#FF0000";      //设置填充样式
    ctx.strokeStyle = "#00FF00";        //设置轮廓样式
    ctx.fillRect(10, 10, 100, 50);     // 绘制矩形，填充的默认颜色为红色
    ctx.strokeRect(10, 70, 100, 50);   // 绘制矩形边框，边框颜色为绿色
    ctx.clearRect(15, 15, 50, 25);      //清除一个矩形区域，如果是在填充的位置，则会挖出来一个空白

2.2 在Canvas中绘制直线或者闭合曲线

//绘制线段或者闭合路径
    ctx.beginPath();
    ctx.moveTo(300, 100);
    ctx.lineTo(500, 100);
    ctx.lineTo(400, 200);
    ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
    ctx.stroke(); //描边。stroke不会自动closePath()
    ctx.fill(); //填充

2.3 在Canvas中绘制圆弧

 //绘制圆弧，绘制圆弧函数arc(x,y,r,startAngle,endAngle,anticlosewise)anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)
    ctx.beginPath();
    ctx.arc(250, 250, 40, 0, (Math.PI)*3 / 2, false);
    ctx.stroke();

    //由此可知，在X轴正方向上的角度为0，false表示顺时针

2.4 在Canvas中绘制圆角线条

//绘制圆角线条
    var lineCaps = ["butt", "round", "square"];
    for (var i = 0; i < 3; i++){
        ctx.beginPath();
        ctx.moveTo(200 + 30 * i, 30);
        ctx.lineTo(200 + 30 * i, 100);
        ctx.lineWidth = 20;
        ctx.lineCap = lineCaps[i];
        ctx.stroke();
    }

2.5 在Canvas中绘制折线并设置折现的连接方式

//设置路径上，线条与线条的结合方式
    var lineJoin = ['round', 'bevel', 'miter'];
    ctx.lineWidth = 10;
    for (var i = 0; i < lineJoin.length; i++){
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(50, 250 + i * 50);
        ctx.lineTo(100, 300 + i * 50);
        ctx.lineTo(150, 250 + i * 50);
        ctx.lineTo(200, 300 + i * 50);
        ctx.lineTo(250, 250 + i * 50);
        ctx.stroke();
    }

2.6 在Canvas中绘制文本，空心文本或实心文本

//绘制文本
    ctx.font = "100px sans-serif"
    ctx.fillText("你好", 100, 100);
    ctx.strokeText("你好", 100, 200)

2.7 Canvas的其它方法

Canvas还有类似QPainter的其它属性，也是支持translate,scale,rotate等基本变换，同时也支持状态的保存与恢复，这与QPainter类一致

3. Canvas的重绘

在动态绘制时，需要循环调用Canvas的requestPaint()函数来实现重绘，这与在QWidget中调用update()函数或者repaint()函数类似，都可以触发重绘事件，canvas画布内容本身也支持存储为本地文件，使用save()方法，同时也支持转为URL,Canvas的基本基本信号如下

- [1] imageLoaded:图片已经加载完成时发出

- [2] paint:在当前窗体需要渲染时发出

- [3] painted:当前已经完成渲染时发出