QML之Canvas（画布元素）

Qt5中引进了画布元素（canvas element），允许脚本绘制。画布元素（canvas
element） 提供了一个依赖于分辨率的位图画布，你可以使JavaScript脚本来绘制图形，制作游戏或者其它的动态图像。画布元素（canvas
element）是基于HTML5的画布元素来完成的。

 
 画布元素（ canvas element）的基本思想是使一个2D对象来渲染路径。这个2D对象包括了必要的绘图函数，画布元素（canvas
element）充当绘制画布。2D对象持画笔，填充，渐变，文本和绘制路径创建命令。

   在QML中，画布元素（canvas
element）充当了绘制的容器。2D绘制对象提供了实际绘制的方法。绘制需要在onPaint事件中完成。

画布的绘制使用：

1.
装载画笔或者填充模式
2.
创建绘制路径
3.
使用画笔或者填充绘制路径
使用一个简单的例子说明这个过程

onPaint:
{
var ctx = getContext("2d")
ctx.strokeStyle = "red"//画笔的样式
ctx.beginPath()//绘制开始路径，
ctx.moveTo(50,50)//设置一个开始的点
ctx.lineTo(150,50)//设置结束的点
ctx.closePath()//
ctx.stroke()//画路径
}

这样子就画好了一条线。路径的设置，也就是在坐标系中找好点，一个开始点，一个结束点，这样点点之间就是画笔的路径。使用stroke就把路径线画好了。这里面的坐标是二维笛卡尔坐标系统，左上角是（
0,0）坐标。Y轴坐标轴向下，X轴坐标轴向右。