像素缓存

使用画布时，可以通过从画布中检索像素数据来读取或操作画布的像素。 要读取图像数据，请使用createImageData(sw,sh)或getImageData(sx,sy,sw,sh)。 这两个函数都返回一个带有width、height和data变量的ImageData对象。 data变量包含获取到的一维数组数据，它以RGBA格式存储像素，其中每个值的范围为0到255。要在画布上设置像素，可以使用putImageData(imagedata, dx, dy)函数。

检索画布内容的另一种方法是将数据存储到图像中，这可以通过Canvas的函数save(path)或toDataURL(mimeType)来实现，后者的函数返回一个图像URL，它可以被一个Image元素加载。

import QtQuick

Rectangle {
    width: 240; height: 120
    Canvas {
        id: canvas
        x: 10; y: 10
        width: 100; height: 100
        property real hue: 0.0
        onPaint: {
            var ctx = getContext("2d")
            var x = 10 + Math.random(80)*80
            var y = 10 + Math.random(80)*80
            hue += Math.random()*0.1
            if(hue > 1.0) { hue -= 1 }
            ctx.globalAlpha = 0.7
            ctx.fillStyle = Qt.hsla(hue, 0.5, 0.5, 1.0)
            ctx.beginPath()
            ctx.moveTo(x+5,y)
            ctx.arc(x,y, x/10, 0, 360)
            ctx.closePath()
            ctx.fill()
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                var url = canvas.toDataURL('image/png')
                print('image url=', url)
                image.source = url
            }
        }
    }

    Image {
        id: image
        x: 130; y: 10
        width: 100; height: 100
    }

    Timer {
        interval: 1000
        running: true
        triggeredOnStart: true
        repeat: true
        onTriggered: canvas.requestPaint()
    }
}

在小示例中，每隔一秒在左边的画布上画一个小圆圈。 当用户单击鼠标区域时，会存储画布内容并检索图像URL。 在示例的右侧，将显示图像。