HTML5 캔버스에 점 그리기

HTML5 캔버스에 점 그리기

---

이 질문에는 이미 답변이 있습니다.

• HTML5 캔버스에서 단일 픽셀을 설정하는 가장 좋은 방법은 무엇입니까? 답변 14 개

context.moveTo()및 context.lineTo()함수를 사용하여 HTML5 캔버스에 선을 그리는 것은 매우 간단 합니다.

도트를 그릴 수 있는지, 즉 단일 픽셀을 채색 할 수 있는지 확실하지 않습니다. lineTo 함수는 단일 픽셀 선을 그리지 않습니다 (분명히).

이를 수행 할 방법이 있습니까?

---

성능상의 이유로 원을 피할 수 있다면 원을 그리지 마십시오. 너비와 높이가 1 인 사각형을 그리십시오.

ctx.fillRect(10,10,1,1); // fill in the pixel at (10,10)

---

많은 픽셀을 그릴 계획이라면 캔버스의 이미지 데이터를 사용하여 픽셀 드로잉을하는 것이 훨씬 더 효율적입니다.

var canvas = document.getElementById("myCanvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");
var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);

// That's how you define the value of a pixel //
function drawPixel (x, y, r, g, b, a) {
    var index = (x + y * canvasWidth) * 4;

    canvasData.data[index + 0] = r;
    canvasData.data[index + 1] = g;
    canvasData.data[index + 2] = b;
    canvasData.data[index + 3] = a;
}

// That's how you update the canvas, so that your //
// modification are taken in consideration //
function updateCanvas() {
    ctx.putImageData(canvasData, 0, 0);
}

이 방법으로 사용할 수있는 것보다 :

drawPixel(1, 1, 255, 0, 0, 255);
drawPixel(1, 2, 255, 0, 0, 255);
drawPixel(1, 3, 255, 0, 0, 255);
updateCanvas();

자세한 내용은 Mozilla 블로그 게시물 ( http://hacks.mozilla.org/2009/06/pushing-pixels-with-canvas/)을 참조하십시오.

---

이상하게 보이지만 HTML5는 선, 원, 사각형 및 기타 여러 기본 도형 그리기를 지원하지만 기본 점을 그리기에 적합한 것은 없습니다. 그렇게하는 유일한 방법은 당신이 가진 것을 가지고 포인트를 시뮬레이션하는 것입니다.

따라서 기본적으로 3 가지 가능한 솔루션이 있습니다.

• 점을 선으로 그리다
• 다각형으로 점을 그립니다
• 점을 원으로 그리다

그들 각각은 단점이 있습니다.

---

선

function point(x, y, canvas){
  canvas.beginPath();
  canvas.moveTo(x, y);
  canvas.lineTo(x+1, y+1);
  canvas.stroke();
}

우리는 남동쪽 방향으로 그림을 그리며, 이것이 가장자리라면 문제가있을 수 있습니다. 그러나 다른 방향으로 그릴 수도 있습니다.

---

직사각형

function point(x, y, canvas){
  canvas.strokeRect(x,y,1,1);
}

또는 렌더링 엔진이 한 픽셀 만 채울 수 있기 때문에 fillRect를 사용하는 더 빠른 방법입니다.

function point(x, y, canvas){
  canvas.fillRect(x,y,1,1);
}

---

원

One of the problems with circles is that it is harder for an engine to render them

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.stroke();
}

the same idea as with rectangle you can achieve with fill.

function point(x, y, canvas){
  canvas.beginPath();
  canvas.arc(x, y, 1, 0, 2 * Math.PI, true);
  canvas.fill();
}

Problems with all these solutions:

• it is hard to keep track of all the points you are going to draw.
• when you zoom in, it looks ugly

If you are wondering, what is the best way to draw a point, I would go with filled rectangle. You can see my jsperf here with comparison tests

---

In my Firefox this trick works:

function SetPixel(canvas, x, y)
{
  canvas.beginPath();
  canvas.moveTo(x, y);
  canvas.lineTo(x+0.4, y+0.4);
  canvas.stroke();
}

Small offset is not visible on screen, but forces rendering engine to actually draw a point.

---

The above claim that "If you are planning to draw a lot of pixel, it's a lot more efficient to use the image data of the canvas to do pixel drawing" seems to be quite wrong - at least with Chrome 31.0.1650.57 m or depending on your definition of "lot of pixel". I would have preferred to comment directly to the respective post - but unfortunately I don't have enough stackoverflow points yet:

I think that I am drawing "a lot of pixels" and therefore I first followed the respective advice for good measure I later changed my implementation to a simple ctx.fillRect(..) for each drawn point, see http://www.wothke.ch/webgl_orbittrap/Orbittrap.htm

Interestingly it turns out the silly ctx.fillRect() implementation in my example is actually at least twice as fast as the ImageData based double buffering approach.

At least for my scenario it seems that the built-in ctx.getImageData/ctx.putImageData is in fact unbelievably SLOW. (It would be interesting to know the percentage of pixels that need to be touched before an ImageData based approach might take the lead..)

Conclusion: If you need to optimize performance you have to profile YOUR code and act on YOUR findings..

---

This should do the job

//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");

//draw a dot
ctx.beginPath();
ctx.arc(20, 20, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

참고URL : https://stackoverflow.com/questions/7812514/drawing-a-dot-on-html5-canvas