给几个QML中Canvas的案例和代码解释

1. 绘制一个简单的矩形：

Canvas {
    id: canvas
    width: 200
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        ctx.fillStyle = "red";
        ctx.fillRect(50, 50, 100, 100);
    }
}

这个例子中，我们创建了一个200x200的Canvas，并在onPaint事件中使用2D绘图上下文对象绘制了一个50x50大小的红色矩形。

2. 绘制一条直线：

Canvas {
    id: canvas
    width: 200
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(150, 150);
        ctx.strokeStyle = "blue";
        ctx.stroke();
    }
}

这个例子中，我们创建了一个200x200的Canvas，并在onPaint事件中使用2D绘图上下文对象绘制了一条蓝色直线，起点为(50,50)，终点为(150,150)。

3. 绘制一个圆：

Canvas {
    id: canvas
    width: 200
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.fillStyle = "green";
        ctx.fill();
    }
}

这个例子中，我们创建了一个200x200的Canvas，并在onPaint事件中使用2D绘图上下文对象绘制了一个半径为50的绿色圆，圆心为(100,100)。

4. 绘制一个图片：

Canvas {
    id: canvas
    width: 200
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        var img = new Image();
        img.src = "image.png";
        img.onload = function () {
            ctx.drawImage(img, 0, 0);
        }
    }
}

这个例子中，我们创建了一个200x200的Canvas，并在onPaint事件中使用2D绘图上下文对象绘制了一张名为image.png的图片，图片左上角的坐标为(0,0)。我们使用了Image对象的onload事件，确保图片加载完成后再绘制到Canvas上。