javascript - учебник - уроки html css для начинающих

Прокручиваемый холст внутри div (4)

У меня есть холст html5. Мне нужно показать фиксированную часть этого в div ( Div1 ). Когда я 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 здесь

"прокрутка" в канве, вам нужно обработать 2 случая:
- событие связывания "mousedown" в этом холсте и событие связывания "mouseup" в функции связывания "mousedown".
- связать событие "DOMmouseup" в этом холсте. Пользователь может прокрутить кнопку мыши для прокрутки.
Чтобы показать холст как свиток
1. Перерисовать холст
2. Используйте clip () на холсте. Переустановите прямоугольник этого клипа, чтобы показать свой холст
Пожалуйста, удалите "position: absolute" в вашем CSS холста. И установите высоту для вашего "div"

Надеюсь, это поможет вам

Вот демонстрация использования холста негабаритного размера и прокрутки с помощью движений мыши путем настройки поля 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);

Лучше прокрутить внутри холста, см. Этот плагин Phaser, чтобы сделать это https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/

это не сработает (прокручивая холст изнутри 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>