# 画布元素(Canvas)

QML的一个优点是它与Javascript生态系统的密切关系。这使我们能够重用来自web世界的现有解决方案，并将其与QML可视化的本机性能相结合。然而，有时也希望重用web空间中的图形解决方案，这就是Canvas元素派上用场的地方。canvas元素提供了一个与同名HTML元素的绘图API非常接近的API。

canvas元素的基本思想是使用上下文2D对象渲染路径。上下文2D对象包含必要的图形功能，而canvas(画布)充当绘图画布。2D上下文支持描边、填充渐变、文本和一组不同的路径创建命令。

看一个简单的路径绘制示例：

import QtQuick

Canvas {
    id: root
    // canvas size
    width: 200; height: 200
    // handler to override for drawing
    onPaint: {
        // get context to draw with
        var ctx = getContext("2d")
        // setup the stroke
        ctx.lineWidth = 4
        ctx.strokeStyle = "blue"
        // setup the fill
        ctx.fillStyle = "steelblue"
        // begin a new path to draw
        ctx.beginPath()
        // top-left start point
        ctx.moveTo(50,50)
        // upper line
        ctx.lineTo(150,50)
        // right line
        ctx.lineTo(150,150)
        // bottom line
        ctx.lineTo(50,150)
        // left line through path closing
        ctx.closePath()
        // fill using fill style
        ctx.fill()
        // stroke using line width and stroke style
        ctx.stroke()
    }
}

这将生成一个填充矩形，其起点为(50,50)，长宽为100，笔画当做边框装饰。

描边宽度设置为4，并使用strokeStyle将描边颜色定义成蓝色，通过fillStyle将填充“钢蓝色”设置最终的形状。只有调用stroke或fill才会绘制实际路径，并且它们可以相互独立使用。调用stroke或fill将绘制当前路径。无法存储路径以供以后重用，只能存储和恢复绘图状态。

在QML中，Canvas元素充当绘图的容器，2D上下文对象提供实际的绘图操作，实际绘制需要在onPaint事件处理器中完成。

Canvas {
    width: 200; height: 200
    onPaint: {
        var ctx = getContext("2d")
        // setup your path
        // fill or/and stroke
    }
}

画布(canvas)本身提供了一个典型的二维笛卡尔坐标系，其中左上角是(0,0)点，向下为y轴正方向，向右为x轴正方向。

基于路径API的典型命令顺序如下：

设置描边和/或填充
创建路径
描边和/或填充

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

    // setup the stroke
    ctx.strokeStyle = "red"

    // create a path
    ctx.beginPath()
    ctx.moveTo(50,50)
    ctx.lineTo(150,50)

    // stroke path
    ctx.stroke()
}

这会生成一条从点P1(50,50)到点P2(150,50)的水平描边线。

提示

通常，总是希望在重置路径时设置一个起点，因此beginPath之后的第一个操作通常是moveTo。

← 小结便捷API →