canvas加载图片,在图片上有矩形框,有文字标注
时间: 2024-09-19 11:03:32 浏览: 33
在HTML5 Canvas上,你可以通过以下步骤加载图片并添加矩形框以及文字标注:
1. **加载图片**:
使用`canvas.getContext('2d').drawImage()`方法加载图片,首先创建一个Image对象,设置其src属性为图片URL,然后当图片加载完成后再操作。
```javascript
var img = new Image();
img.src = 'image_url';
img.onload = function() {
drawImageOnCanvas(img);
};
```
2. **绘制矩形框**:
当图片加载完成后,可以使用`fillRect()`或`strokeRect()`方法在canvas上绘制矩形,需要提供矩形左上角坐标、宽度和高度作为参数。
```javascript
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()`方法在矩形内或矩形周围添加文本,同样需要指定文本内容、字体样式和坐标。
```javascript
// 文本标注
var text = '这是标注的文字';
ctx.fillStyle = 'black'; // 设置字体颜色
ctx.font = '16px Arial'; // 设置字体大小和类型
ctx.fillText(text, rectX + rectWidth, rectY + rectHeight);
```
阅读全文