import QtQuick 2.2
import QtQuick.Controls 1.1
Canvas
{
id: root
width: 200; height: 200
onPaint:
{
var ctx = getContext("2d")
ctx.lineWidth = 2
ctx.strokeStyle = "blue"
ctx.fillStyle = "red"
ctx.beginPath()
ctx.moveTo(50,50)
ctx.lineTo(150,50)
ctx.lineTo(150,150)
ctx.lineTo(50,150)
ctx.closePath()
ctx.fillRect(10,10,10,10)
ctx.strokeRect(20,20,10,10);
ctx.fill()
ctx.stroke()
}
}
使用漸變
import QtQuick 2.2
import QtQuick.Controls 1.1
Canvas
{
id: root
width: 200; height: 200
onPaint:
{
var ctx = getContext("2d")
var gradient = ctx.createLinearGradient(0,0,200,200)
gradient.addColorStop(0,"blue")
gradient.addColorStop(0.5,"red")
gradient.addColorStop(1,"yellow")
ctx.fillStyle = gradient
ctx.fillRect(10,10,100,100)
}
}
增加陰影
import QtQuick 2.2
import QtQuick.Controls 1.1
Canvas
{
id: root
width: 200; height: 200
onPaint:
{
var ctx = getContext("2d")
ctx.shadowColor = "black";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
var gradient = ctx.createLinearGradient(0,0,200,200)
gradient.addColorStop(0,"blue")
gradient.addColorStop(0.5,"red")
gradient.addColorStop(1,"yellow")
ctx.fillStyle = gradient
ctx.fillRect(10,10,100,100)
}
}