QML类型——Canvas

正文

提供2D画布的对象，可通过JavaScript进行绘图。

示例：

import QtQuick 2.0

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()
}

详细说明

画布对象允许绘制直线和曲线，简单和复杂的形状，图形以及动态图像。它还可以添加文本，颜色，阴影，渐变和图案，并直线低级像素操作。画布输出可以保存为图像文件或序列化为URL。
画布的基本思想是使用Context2D对象来渲染路径。Context2D对象包括了必要的绘图函数，画布元素充当绘制画布。Context2D对象支持画笔，填充，渐变，文本和绘制路径创建命令。

要在画布中定义绘图区域，请设置width和height属性。例如，以下代码创建一个Canvas对象，绘图区域高度为100px，宽度为200px：

import QtQuick 2.0

Canvas {
    {
    id:  mycanvas
    width:  100
    hei