canvas加载图片，在图片上有矩形框，有文字标注

在HTML5 Canvas上，你可以通过以下步骤加载图片并添加矩形框以及文字标注：

1. **加载图片**：
使用`canvas.getContext('2d').drawImage()`方法加载图片，首先创建一个Image对象，设置其src属性为图片URL，然后当图片加载完成后再操作。

var img = new Image();
img.src = 'image_url';
img.onload = function() {
    drawImageOnCanvas(img);
};

2. **绘制矩形框**：
当图片加载完成后，可以使用`fillRect()`或`strokeRect()`方法在canvas上绘制矩形，需要提供矩形左上角坐标、宽度和高度作为参数。

function drawImageOnCanvas(img) {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.width, img.height); // 绘制图片到canvas中心

    // 绘制矩形框
    var rectX = img.width / 2; // 矩形框位置
    var rectY = img.height / 2;
    var rectWidth = 50; // 矩形宽度
    var rectHeight = 30; // 矩形高度
    ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
}

3. **添加文字标注**：
使用`fillText()`或`strokeText()`方法在矩形内或矩形周围添加文本，同样需要指定文本内容、字体样式和坐标。

// 文本标注
var text = '这是标注的文字';
ctx.fillStyle = 'black'; // 设置字体颜色
ctx.font = '16px Arial'; // 设置字体大小和类型
ctx.fillText(text, rectX + rectWidth, rectY + rectHeight);