在画布上创建滚动事件

Question

我有一个带有显示图形的画布的弹出窗口，但有时图形比画布大，我可以添加某种滚动事件以允许用户水平滚动，以查看其余部分图表？

Answer 1

Canvas是一个普通的DOM元素，如img，因此您可以使用常规CSS样式来定义滚动行为。例如：

＆＃13;

＆＃13;

$(document).ready(function(){
  var ctx = $("#canvs").get(0).getContext('2d');
  ctx.fillStyle = 'black';  
  ctx.fillRect(0,0,1600,300);
  ctx.strokeStyle = "lime";  
  ctx.moveTo(0, 150);      
  for (var i = 0; i <= 16; i++){
    var y = i % 2 == 0 ? 50 : 250;
    ctx.lineTo(i * 100, y);
    ctx.stroke();
  }
});

＆＃13;

#cont{
  display: block;
  width: 500px;
  height: 330px;
  overflow: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cont'>
  <canvas id='canvs' width='1600px' height='300px'></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;