在HTML5 canvas元素中移动矩形（像素）区域的最快方法是什么 [英] What is the fastest way to move a rectangular (pixel) region inside a HTML5 canvas element

问题描述

我想实现垂直滚动的HTML5画布元素的内容。我不想再次呈现整个内容。

I want to implement vertical scrolling of the contents of a HTML5 canvas element. I don't want to render the whole content again. Instead I would like to move the whole content down/up and only render the area, which has been scrolled into view.

我试着使用 getImageData 和 putImageData 函数，但在我的测试中，它们几乎和重绘整个场景一样慢。

I experimented with the getImageData and putImageData functions but in my tests they are almost as slow as repainting the whole scene.

// scroll 20px down
var data = ctx.getImageData(0, 0, width, height-20);
ctx.putImageData(0, 20);

在canvas元素内部复制矩形像素区域的最快方法是什么？

What is the fastest way to copy rectangular pixel regions inside of a canvas element?

推荐答案

尝试：

ctx.drawImage canvas，0，0，width，height-20，0，20，width，height-20）;

drawImage 可以使用 HTMLImageElement ， HTMLCanvasElement 或 HTMLVideoElement 作为第一个参数。

drawImage can take either an HTMLImageElement, an HTMLCanvasElement, or an HTMLVideoElement for the first argument.

这篇关于在HTML5 canvas元素中移动矩形（像素）区域的最快方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！