Как сделать видимым только конкретную область холста?

Question

Что у меня есть:

Давайте 500px широкого холста:

     +---------+ 
+-------------------------------------------------+ 
|     |   |     | 
| X  XXXX | XXXXXX | X X XXXXX | 
| XXX  X XX | XXXX | XX X X  | 
| X  XXXX | XXXX | XX XXXXXX XXXX | 
| X  XXX  |  XX |  X  XXX | 
| XXXX XXXXXXX | XXXXXX |  X X XX | 
|     |   |   XXXXX | 
+-------------------------------------------------+ 
x=0     +---------+     x=500 
        x=200  x=300 

Различного рисунка есть в другой части холста.

Что я хочу:

Я хочу, чтобы сделать видимыми только 1/5 из холста. Предположим, что на приведенной выше диаграмме x = 200-300 должны быть видны.

В конечном счете, я хочу изменить видимую область и создать эффект слайда влево или вправо в холсте.

Любая помощь и свинец ценится :)

Answer 1

Рисование на холсте быстро, как очень быстро.

Также вы можете нарисовать холст на другом и выполнить прямые прямоугольные операции отсечения с использованием метода drawImage().

Итак, лучшее решение IMO, чтобы вначале нарисовать ваш полный холст в качестве буфера (не добавляйте его в документ), затем нарисуйте только нужную часть на встроенном документе.

Вот приблизительный пример того, как его достичь.

// first do your full drawings on a buffer canvas 
 
var buffer = document.createElement('canvas'); 
 
var bCtx = buffer.getContext('2d'); 
 
buffer.width = 1000; 
 
buffer.height = 200; 
 
bCtx.font = '30px sans-serif'; 
 
bCtx.textBaseline = 'middle'; 
 
bCtx.textAlign = 'center'; 
 

 
// define your slides 
 
var slideWidth = 100; 
 
var slides = 10; 
 

 
for(var i=0;i<slides; i++){ 
 
    bCtx.fillText(i, i*slideWidth+50, buffer.height/2); 
 
    bCtx.fillRect((i*slideWidth)-1, 0, 1 , buffer.height); 
 
    } 
 
// now our full canvas is drawn 
 

 
// get the inDoc's context 
 
var ctx = inDoc.getContext('2d'); 
 

 
// the speed at which our slides will move 
 
var offset = 4; 
 

 
// a function to initialize our animation 
 
var animate = function(currentSlide,to){ 
 
    var direction = currentSlide<to ? 1:-1; 
 
    var from = currentPos; 
 
    // an inside func to use raf 
 
    var anim = function(){ 
 
    // that was the last call, return 
 
    if(from===to){ 
 
     return; 
 
     } 
 
    // clear our inDoc canvas  
 
    ctx.clearRect(0,0,inDoc.width, inDoc.height); 
 
    // increment our position 
 
    from += offset*direction; 
 
    currentPos = from; 
 
    // draw our buffer canvas onto the inDoc one 
 
    // drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh) 
 
    ctx.drawImage(buffer, from, 0, slideWidth, buffer.height, 0,0,slideWidth, buffer.height); 
 
    // do it again in 30th of a second 
 
    requestAnimationFrame(anim); 
 
    }; 
 
    // call the inner animation 
 
    anim(); 
 
    } 
 

 
// our actual slide 
 
var currentSlide = 0; 
 
// our actual real position 
 
var currentPos = 0; 
 
next.onclick = function(){ 
 
    // we'll move by one slideWidth 
 
    currentSlide += slideWidth; 
 
    // we still have room 
 
    if(currentSlide <= slides*slideWidth){ 
 
    animate(currentSlide-slideWidth, currentSlide); 
 
    } 
 
    // we reached the last slide 
 
    if(currentSlide === (slides*slideWidth)-slideWidth){ 
 
    this.setAttribute('disabled',true); 
 
    } 
 
    // enable the "previous" button 
 
    prev.removeAttribute('disabled'); 
 
    }; 
 

 
prev.onclick = function(){ 
 
    // we'll move by one slideWidth backward 
 
    currentSlide -= slideWidth; 
 
    // we still have room 
 
    if(currentSlide >= 0){ 
 
    animate(currentSlide+slideWidth, currentSlide); 
 
    } 
 
    // we reached the first slide 
 
    if(currentSlide===0){ 
 
    this.setAttribute('disabled', true); 
 
    } 
 
    // enable the "next" button 
 
    next.removeAttribute('disabled'); 
 
    }; 
 
// draw the first slide 
 
ctx.drawImage(buffer, 0, 0, slideWidth, buffer.height, 0,0,slideWidth, buffer.height); 
 

 
check.onchange = function(){ 
 
    this.checked ? document.body.appendChild(buffer) : document.body.removeChild(buffer); 
 
    };

body{background: skyblue;}button{ vertical-align : top;} 
 
canvas{background: white}

<button id="prev" disabled>previous</button><canvas id="inDoc" width ="100" height="200"></canvas><button id="next">next</button> 
 
<label for="check">show the buffer canvas</label><input name="check" id="check" type="checkbox"/>