Question

我正在从网络服务器部分接收图像，比如说 600 像素 x 600 像素，这是我在画布上绘制的。

图片的实际大小是 600px x 1200px(height)。

我需要在画布上创建滚动条。在我将拖动滚动条后，我将计算我移动了滚动条的像素数，发送到服务器信息，然后我将收到图片的其他部分（600x600 像素）但已滚动。机制由我完成，但我需要在画布上绘制滚动条。

<b-card>
  <div id="image">
    <canvas
      id="canvasId"
      ref="canRef"
      @mousedown="clickMe"
      @mouseup="scrollOff"
      @mousemove="scrollMe"
    />
  </div>
</b-card>

如何在画布右侧绘制滚动条？

Answer 1

首先，获取画布元素及其上下文

const canvas = document.getElementById('canvasId');
const ctx = canvas.getContext('2d');

然后，使用 stroke() 函数绘制矩形

ctx.beginPath();
ctx.rect(0, 0, 150, 100); //change to the coordinates you want
ctx.stroke();

您可以使用以下方法控制线条的颜色和宽度：

ctx.lineWidth = 10;
ctx.strokeStyle = '#ff0000';

如何在画布上绘制矩形

1 个答案: