qml的繪圖Canvas

import QtQuick 2.5
import QtQuick.Window 2.2
Window {
    visible: true
    width: 400
    height: 400
    Rectangle{
        id:rec
        x:50
        y:50
        width:250
        height: 250
        color: "gray"
    Canvas{
       x:50
       y:50
       id:canvas
       width: 150
       height: 150
       property real lastX
       property real lastY
    contextType: "2d"
    visible: true
    onPaint: {//繪圖事件的響應
        context.lineWidth=1.0;//線的寬度
        context.strokeStyle="red";//線的顔色
        context.fillStyle="white";//填充顔色
        context.beginPath();//開始
        context.moveTo(lastX, lastY)//移動到指定位置
         lastX = area.mouseX
         lastY = area.mouseY
        context.lineTo(lastX, lastY)//劃線到指定位置
        context.stroke();//背景執行
    }
    MouseArea {
               id: area
              anchors.fill: parent//屏蔽父視窗的點選事件
               onPressed: {
                    canvas.lastX = mouseX//滑鼠位置
                    canvas.lastY = mouseY
               }
               onPositionChanged: {//位置改變事件
                   canvas.requestPaint()//重繪
               }} } }}