如何使仅特定区域的画布可见？

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"/>