canvans 实现给图片画矩形 箭头

可以使用 Canvas 的绘制 API 来实现给图片画矩形和箭头的操作。以下是一个基本的示例代码：

<!-- HTML -->
<canvas id="canvas"></canvas>

<!-- JavaScript -->
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // 绘制矩形
  ctx.beginPath();
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 5;
  ctx.rect(50, 50, 200, 100);
  ctx.stroke();

  // 绘制箭头
  ctx.beginPath();
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 5;
  ctx.moveTo(100, 200);
  ctx.lineTo(200, 200);
  ctx.lineTo(200, 150);
  ctx.stroke();
};

其中，`ctx.rect()` 方法用于绘制矩形，接受四个参数分别为矩形左上角的 x 坐标、y 坐标、宽度和高度。而绘制箭头需要使用 `ctx.moveTo()` 和 `ctx.lineTo()` 方法来绘制直线，并使用三角形来表示箭头。