div內的可滾動畫布

Question

我有一個html5畫布。 我需要在div（ Div1 ）中顯示它的固定部分。 當我在Div1滑動時，我需要滾動畫布。 所以當我滾動時，我會看到畫布的相應部分。

我試過這樣的事情：

<div id="Div1" style=" float: left; width: 50px; overflow:hidden; ">
   <canvas id="myCanvas1" width="200px" style="border: 1px solid #ff0000; position: absolute;">
   </canvas>
</div>

jsFiddled here

Answer 1

它不起作用（在某些“設計”條件下從div內部滾動畫布），首先隱藏溢出。 嘗試滾動畫布內的內容 。

或者，試試這個： http ： //jsfiddle.net/9g3GG/2/

 <div id="Div1" style=" float: left; width: 150px; overflow:scroll; "> <canvas id="myCanvas1" width="200" style="border:1px solid #ff0000;">asdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdf</canvas> </div> 

Answer 2

這是一個使用超大畫布的演示，並通過調整CSS邊距滾動鼠標移動： https ： //jsfiddle.net/ax7n8944/

HTML：

<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
    <canvas id="canvas" width="10000px" height="250px"></canvas>
</div>

JS：

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;

for (var i = 0; i < 1000; i++) {
    context.beginPath();
    context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
    context.stroke();
} 

canvas.addEventListener('mousedown', function(e) {
    var evt = e || event;
    dragging = true;
    lastX = evt.clientX;
    e.preventDefault();
}, false);

window.addEventListener('mousemove', function(e) {
    var evt = e || event;
    if (dragging) {
        var delta = evt.clientX - lastX;
        lastX = evt.clientX;
        marginLeft += delta;
        canvas.style.marginLeft = marginLeft + "px";
    }
    e.preventDefault();
}, false);

window.addEventListener('mouseup', function() {
    dragging = false;
}, false);

Answer 3

最好在畫布內滾動，看看這個Phaser插件來做到這一點https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

Answer 4

1. 在畫布中“滾動”，你需要處理2個案例：
   • 在此畫布中綁定事件“mousedown”並在“mousedown”綁定函數中綁定事件“mouseup”。
   • 在此畫布中綁定事件“DOMmouseup”。 用戶可以在鼠標滾輪按鈕滾動。
2. 將畫布顯示為滾動
   1. 重繪畫布
   2. 在畫布中使用clip（）。 重新設置此剪輯的矩形以顯示畫布
3. 請在你的css畫布中刪除“position：absolute”。 並為你的“div”設置高度

希望它能幫到你

Answer 5

繪制了div的行。 將行大小設置為0：

DIVofCanvas {
    line-height: 0px;
}