如何在 canvas 上繪制矩形

Question

我正在從圖像的網絡服務器部分接收，比如說 600px x 600px，我在 canvas 中繪制。

圖像的實際尺寸可以說是 600 像素 x 1200 像素（高度）。

我需要在 canvas 上創建滾動條。 在我拖動滾動條后，我將計算，我移動滾動條的像素數，發送到服務器信息，我將收到圖片的其他部分（600x600px）但滾動。 該機制由我完成，但我需要在 canvas 上繪制滾動條。

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

如何在canvas右側繪制滾動條？

Answer 1

首先，獲取 canvas 元素及其上下文

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

然后，使用stroke() function 繪制矩形

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

您可以使用以下方法控制線條的顏色和寬度：

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