QML Canvas 绘制点线面

作者： 一去、二三里
个人微信号： iwaleon
微信公众号： 高效程序员

Canvas 是一个用于在 QML 中绘制图形的元素，它提供了一个依赖于分辨率的位图画布，可用于动画、游戏、数据可视化、图片编辑以及视频处理等方面。

对于 Canvas 来说，它只是一个图形容器，本身不具备绘图能力，实际的绘制工作是由 Context2D（名为：2D上下文）完成的，该上下文提供了一系列的 API 来绘制图形（例如：直线、矩形、圆形等）和操作图形（例如：平移、旋转、缩放等）。

在 QML Canvas 中，使用 Context2D 进行图形绘制的方式与 HTML5 Canvas 相似，可以通过 JavaScript 代码来调用各种绘图方法，绘制出各种复杂的图形和动画效果。

完整的思维导图如下：

基础概念

在 Canvas 的 2D 上下文中，坐标系被呈现为一个二维笛卡尔坐标系，左上角为原点 (0,0)，向右为 x 轴正方向，向下为 y 轴正方向。

在该坐标系中，每个点都可以用一个二元组 (x,y) 来表示。如下图所示：