Qt Quick 示例 - Canvas
这是一组 QML Canvas 示例。
Canvas是一组与 `Canvas ` 类型相关的小型 QML 示例。每个示例都是一个小型 QML 文件，重点展示某种特定类型或功能。
运行示例
您可以通过以下方式运行示例：
- Qt Creator
打开Welcome 模式，并从Examples 中选择示例。有关更多信息，请参阅Qt Creator ：教程：构建和运行。
- Qt Extension for Visual Studio Code
在Command Palette 中运行Qt: Open Qt examples 命令，然后从列表中选择示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。
红色心形
“红心”使用贝塞尔曲线 API 来描边并填充一个红心。
ctx.beginPath()
ctx.moveTo(75,40)
ctx.bezierCurveTo(75,37,70,25,50,25)
ctx.bezierCurveTo(20,25,20,62.5,20,62.5)
ctx.bezierCurveTo(20,80,40,102,75,120)
ctx.bezierCurveTo(110,102,130,80,130,62.5)
ctx.bezierCurveTo(130,62.5,130,25,100,25)
ctx.bezierCurveTo(85,25,75,37,75,40)
ctx.closePath()对话气泡
对话气泡使用 quadraticCurveTo() API 来绘制轮廓并填充自定义的对话气泡：
ctx.beginPath()
ctx.moveTo(75, 25)
ctx.quadraticCurveTo(25, 25, 25, 62.5)
ctx.quadraticCurveTo(25, 100, 50, 100)
ctx.quadraticCurveTo(50, 120, 30, 125)
ctx.quadraticCurveTo(60, 120, 65, 100)
ctx.quadraticCurveTo(125, 100, 125, 62.5)
ctx.quadraticCurveTo(125, 25, 75, 25)
ctx.closePath()此示例还演示了 fillText() API：
ctx.fillStyle = "white"
ctx.font = "bold 17px sans-serif"
ctx.fillText("Qt Quick", 40, 70)椭圆
“椭圆”通过一组简单的 moveTo() 和 lineTo() 路径 API 绘制了一个平滑的椭圆。
圆角矩形
圆角矩形使用一系列 lineTo() 和 arcTo() 路径 API 来绘制圆角矩形。
笑脸
笑脸利用若干路径绘制并填充一个笑脸。
裁剪
“裁剪”使用 clip API 对给定的图像进行裁剪。
ctx.clip()
ctx.drawImage(canvas.imagefile, 0, 0)老虎
“老虎”使用 SVG 路径 API，通过一组 SVG 路径字符串绘制一只老虎。
for (let i = 0; i < Tiger.tiger.length; i++) {
if (Tiger.tiger[i].width !== undefined)
ctx.lineWidth = Tiger.tiger[i].width
if (Tiger.tiger[i].path !== undefined)
ctx.path = Tiger.tiger[i].path
if (Tiger.tiger[i].fill !== undefined) {
ctx.fillStyle = Tiger.tiger[i].fill
ctx.fill()
}
if (Tiger.tiger[i].stroke !== undefined) {
ctx.strokeStyle = Tiger.tiger[i].stroke
ctx.stroke()
}
}© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
