javascript - 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://jdnicholsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

Answer 4

1. 画布中的“滚动”，您需要处理 2 种情况：
   • 在此画布中绑定事件“mousedown”并在“mousedown”绑定函数中绑定事件“mouseup”。
   • 在此画布中绑定事件“DOMmouseup”。用户可以在鼠标滚轮按钮滚动。
2. 像滚动一样显示画布
   1. 重绘画布
   2. 在画布中使用 clip()。重新设置此剪辑的矩形以显示您的画布
3. 请在 canvas 的 css 中删除“position:absolute”。并为您的“div”设置高度

希望它会帮助你

Answer 5

绘制了 div 的线条。将行大小设置为 0：

DIVofCanvas {
    line-height: 0px;
}