пример
Ниже код копирует данные пикселя для указанного прямоугольника на холсте с getImageData() , а затем поместить данные изображения обратно на холсте с putImageData() :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
} Попробуй сам " Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| putImageData() | 4,0 | 9,0 | 3,6 | 4,0 | 10,1 |
Определение и использование
putImageData() метод помещает данные изображения (from a specified ImageData object) обратно на холсте.
Tip: Читайте о getImageData() метод , который копирует данные пикселя для указанного прямоугольника на холсте.
Tip: Читайте о createImageData() метод , который создает новый пустой объект ImageData.
JavaScript Синтаксис
| Синтаксис JavaScript: | context . putImageData( imgData,x,y, dirtyX,dirtyY,dirtyWidth,dirtyHeight ) ; |
|---|
Значения параметров
| параметр | Описание |
|---|---|
| imgData | Задает объект ImageData положить обратно на холст |
| x | Координаты х, в пикселях, в верхнем левом углу объекта ImageData |
| y | Y-координата, в пикселях, в верхнем левом углу объекта ImageData |
| dirtyX | Необязательный. Горизонтальное (x) значение, в пикселях, где поместить изображение на холсте |
| dirtyY | Необязательный. Вертикальное (y) значение, в пикселях, где поместить изображение на холсте |
| dirtyWidth | Необязательный. Ширина использовать, чтобы сделать изображение на холсте |
| dirtyHeight | Необязательный. Высота использовать, чтобы нарисовать изображение на холсте |
<Холст объекта