html5 canvas，在溢出時添加滾動條

Question

你好，我有一個html畫布，我想添加一個滾動條，就像任何網頁或文本區域一樣，我使用了溢出： 但它只顯示滾動條，並且它們被禁用（我無法滾動）

這是標記

<div class="ccsp-area">
    <canvas id="mainCanvas" width="900" height="500"></canvas>
</div>

這是css（scss）

 .ccsp-area {
   width: 90%;
   height: 100%;
   display: inline-block;
   canvas {
     display: inline-block;
     background-color: #fff;
     max-width: 100%   !important;
     overflow: scroll;
   }
 }

最后是JS

var canvas = $("#mainCanvas");
var ctx = canvas[0].getContext('2d');
var targetSizeE = $(".ccsp-area");
var rwidth = targetSizeE.width() -200;
var rheight = targetSizeE.height() -80;
// no need to read more code after this stage
canvas.attr('width', rwidth);
canvas.attr('height', rheight);
ctx.beginPath();
ctx.moveTo(100 , 100);
ctx.lineTo(600, 600);
ctx.lineTo(600,100);
ctx.closePath();
ctx.lineWidth = 20;
ctx.strokeStyle = "rgba(10,220,50,1)";
ctx.fillStyle = "rgba(10,220,50,0.5)";
ctx.stroke();

結果結果的屏幕截圖

如您所見，滾動條被禁用，即使我在畫布中有大於畫布高度的圖形，我也無法滾動。

Answer 1

在這里查看鏈接

您可以分別設置overflow-x和overflow-y 。

查看有關MDN溢出的更多信息

Answer 2

就像那個家伙說的那樣，畫布沒有內容溢出，因此最好的方法是將畫布的寬度和高度設置為非常大的值，例如2200 x 1500（您可以通過js更改高度）

這就是您的CSS的外觀

.ccsp-area {
  width: 90%;
  height: 100%;
  display: inline-block;
  overflow: scroll;
  canvas {
    display: inline-block;
    background-color: #fff;
  }
}

根據您的情況從html元素而不是JS設置大小（也可以隨意刪除設置畫布大小的js代碼）

<canvas id="mainCanvas" width="900" height="500"></canvas>