如何限制更大HTML<canvas>"inside"其父<div>的视图？

Question

我有一个 5500 像素宽的全景图 img（使用 usemap='#imagemap'），我在上面覆盖了 canvas。这些在 div 中作为父级。

一切正常； img 视图仅限于 div，并且可以滚动。但是完整的 (wiiiide) canvas 在浏览器中可见 window.

此外，canvas 不会随 div/img 一起滚动。我必须在 onscroll() 中移动它。

编辑：这是一个 fiddle http://jsfiddle.net/91y2upam/1/ 显示从 div.

逃逸的 canvas（绿色轮廓）

canvas 能否保持 "inside" 其父级 div、受限视图并滚动？

如果是，怎么会这样？

CSS:

#divPano {
  width:  100%;
  overflow: auto;
  }
#cvsPano {
  pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
  position: absolute;
  }

和HTML：

<div name="divPano" id="divPano">
  <canvas id='cvsPano'></canvas> 
  <img  name='imgPano'  id='imgPano' usemap='#mapPano'  src='Pano/Pano0H500s.jpg' >
  </div>

和覆盖 JS（从 onload() 调用）：

function cvsInit(cvs, img) {
  var x, y,  w, h;

    // get it's position and width+height
  x = img.offsetLeft;
  y = img.offsetTop;
  w = img.width;
  h = img.height;

    // place cvsPano in front of the image
  cvs.style.zIndex = 1;
  cvs.parentNode.style.zIndex = 2;    //  <- this didn't work :-(

    // position it over the image
  cvs.style.left = x+'px';
  cvs.style.top = y+'px';

    // make same size as the image
  cvs.setAttribute('width', w+'px');
  cvs.setAttribute('height', h+'px');

    // get it's context
  hdc = cvs.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
  hdc.strokeStyle = '#007700';
  hdc.lineWidth = 1;

  }    //  function cvsInit()

Answer 1

在 css 中，尝试将属性 overflow 更改为其他内容，例如：

overflow: scroll;

也许这样它会随着页面滚动。

Answer 2

制作parentposition:relative和超大childcanvasposition:absolute。

用overflow:scroll或
使用 parent overflow:hidden 以编程方式平移并使用 left:-100px 移动 canvas。

使用滚动条平移

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.onload=function(){
  ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/Whosebug/canvas%20compositing.png";

body{ background-color: ivory; padding:50px; }
canvas{position:absolute; border:1px solid red;}
#parent{position:relative; overflow:scroll; width:300px; height:300px; border:2px solid blue; }

<div id=parent>
  <canvas id="canvas" width=800 height=500></canvas>
</div>

以编程方式平移

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

$myslider=$('#myslider');
$myslider.attr({min:-200,max:0}).val(0);
$myslider.on('input change',function(){
  $('#canvas').css('left',parseInt($(this).val()));
});


var img=new Image();
img.onload=function(){
  ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/Whosebug/canvas%20compositing.png";

body{ background-color: ivory; padding:50px; }
canvas{position:absolute; left:0px; border:1px solid red;}
#parent{position:relative; overflow:hidden; width:300px; height:300px; border:2px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id=myslider type=range>
<br>
<div id=parent>
  <canvas id="canvas" width=800 height=500></canvas>
</div>

如何限制更大HTML<canvas>"inside"其父<div>的视图？

How to limit the view of a larger HTML <canvas> "inside" its parent <div>?

html

scroll

html5-canvas