Qt Quick 예제 - 캔버스
이곳은 QML 캔버스 예제 모음입니다.
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: 튜토리얼: 빌드 및 실행을 참조하십시오.
빨간 하트
Red heart는 베지어 곡선 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를 조합하여 둥근 사각형을 그립니다.
웃는 얼굴
Smile face는 여러 경로를 사용하여 웃는 얼굴을 그리고 채웁니다.
클립
클립은 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.
