Javascript html5画布，在溢出上添加滚动条

您好，我有一个html画布，我想添加一个滚动条，就像任何网页或文本区域一样，我使用了overflow:scroll；但它只显示滚动条，它们被禁用（我不能滚动）

这是标记

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

最后是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();

结果的屏幕截图

如您所见，滚动条已禁用，即使画布中的图形超过画布的高度，我也无法滚动

请参见链接

您可以分别设置

overflow-x

和

overflow-y

---

查看更多关于溢出的信息，如那个家伙所说，canvas没有要溢出的内容 因此，最好的方法是将画布的宽度和高度设置为非常大的值，可能是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代码）

请参见此处：我在发布此问题之前查看了它，我不想要2个滚动条！但我无法在画布上滚动：（Canvas元素没有内容，因此您不能溢出其内容。正如@HMirza给出的链接中所标记的，将画布放在一个外部div中，不要在画布本身上设置oveflow属性。@Kaido问题是外部div，即画布父div具有与画布相同的保存宽度和高度，我现在就试试您所说的不起作用，试过链接中写的内容和你的答案你可以试着看一下，我认为你需要在画布对象大小改变时动态设置画布对象的大小。@Kaido，为什么无效？@SadeqZebari，哇，有一段时间我很难记住我当时的确切心态；-）嗯，我想我错过了它的SCS，所以正如我所说的，有这样的嵌套语句是无效的css，但OP明确指出这是SCS。抱歉。

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

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