캔버스에서 putImageData를 사용하여 점을 그리는 방법?

Question

복잡한 작업을하기 때문에 문제가 해결되지 않아야하지만 문제는 getImageData을 통해 이전에 얻은 일부 지점의 색 정보로 putImageData을 사용하여 점을 그리는 방법입니다.

수평선이 200 픽셀 인 경우 A (0, 0) - B (199, 0)입니다. 나는

var pixels = ctx.getImageData(0, 0, 200, 1); // horizontal line :: 200 pixels 

를 사용하여 픽셀의 색상 정보를 읽을 수 있지만 내가 pixels 배열 (pixel.length = 800)이되면, 나는 다른 장소 (들)에이 라인에서 불과 몇 가지 포인트를 그리려. 라인이 아니라 단지 포인트. 라인 제 n 지점에서 픽셀 컬러 정보를

ctx.putImageData(pixels, 20, 20); 

하지만 어떻게 I은 한순간C (20, 20)을 그릴 수

이 전체 선을 그리는 것 A - B?

어떻게 RGBA 의 어레이를 사용할 수 putImageData

(array.lenght = 4) pixels 데이터 사용? 이와

putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

가 다시 복사 할 이미지 데이터 내의 사각형을 지정할 수 있습니다

Answer 1

putImageData 인수의 또 다른 세트, 더러운 사각형이 있습니다. 사각형의 픽셀 만 캔버스로 복사합니다. 당신이 말한대로

그래서 이것은 당신에게 당신의 수평선을 얻을 것이다 :

ctx.putImageData(pixels, 0, 0, 20, 0, 1, 1) 

:

var pixels = ctx.getImageData(0, 0, 200, 1); // horizontal line :: 200 pixels 

이 당신의 캔버스에 위치 (20,0)에서 이미지 데이터의 (20,0)에서 하나 개의 픽셀을 넣어 것입니다

0/0 오프셋에서 x/y 오프셋을 시작해야한다는 점에 유의하십시오. 이는 더티 사각형이 작동하는 방식 때문입니다. 한 픽셀을 (20,0)에 (0,0)에 넣지 않고 대신 (0,0)에서 시작하여 전체 이미지 데이터를 다시 가져 오지만 그 중 아무 것도 복사하지 않습니다. 더러운 직사각형. 이것은

을 만듭니다.