움직이는 원과 충돌하는 원에 이미지 추가

Question

나는 현재 박스 안에서 서로 튀어 오르고 충돌하는 많은 공 (원)을 가지고있다.

지금 현재는 일반 녹색 공입니다. 하지만이 서클에 이미지를 사용하고 싶습니다.

어떻게하면됩니까? 다음은 내 렌더링 함수입니다.

function render() { 
    var ball; 
    context.fillStyle = "#008800"; 
    for (var i = 0; i <balls.length; i++) { 
    ball = balls[i]; 
    ball.x = ball.nextx; 
    ball.y = ball.nexty; 
    context.beginPath(); 
    context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true); 
    context.closePath(); 
    context.fill(); 
    } 

아이디어가 있으십니까? 가능한가? 그렇지 않다면 이미지를 가지고 튀는 공을 충돌시키는 다른 방법이 있습니까?

Answer 1

는이 세 가지 방법으로 할 수 있습니다 패턴을 녹색 대신 채우기 스타일로 사용할 수 있습니다.

context.fillStyle = pattern; 

그러나 패턴은 항상 좌표 오리진 (기본값 0, 0)에서 기초로 그려 지므로 각 이동에 대해 번역해야합니다. 다행히 그렇게 많이하지 추가 코드 :

/// to move pattern where the ball is 
context.translate(x, y); 

context.beginPath(); 

/// and we can utilize that for the ball as well so we draw at 0,0 
context.arc(0, 0, radius, 0, Math.PI * 2); 
context.closePath(); 

context.fillStyle = pattern; 
context.fill(); 

지금, 당신은 수도 있고 다시 때마다 변환하지 않아도 주위에 당신이 이동에게 공을하려는 방법에 따라 달라집니다.

Here's an online demo showing this approach.

방법 2 - 경로는 우리가 이미지를 그릴의 drawImage를 사용할 수있는 패턴 대신

패스와 볼에 맞게 이미지를 클립. 그러나 문제는 투명한 픽셀로 공의 꼭대기에 맞는 공 모양의 이미지를 만들지 않는 한 사각형을 그립니다.

님의 패턴 방법과 동일한을 달성하기 위해 클리핑 그에 사용할 수 있습니다

여기보다 몇 줄이 필요합니다 :

/// define the ball (we will use its path for clipping) 
context.beginPath(); 
context.arc(x, y, radius, 0, Math.PI * 2); 
context.closePath(); 

/// as we need to remove clip we need to save current satte 
context.save(); 

/// uses current Path to clip the canvas 
context.clip(); 

/// draw the ball which now will be clipped 
context.drawImage(img, x - radius, y - radius); 

/// remove clipping 
context.restore(); 

Here's an online demo of this approach.

방법 3 - 프리 클립 이미지

로 볼 것은 포토샵이나 일부 유사한 프로그램에서 공을 확인하고 당신이 다음 채울 호를 그리는 대신 이미지로이를 그립니다. 성능이 중요한 경우

drawImage(ballImage, x - radius, y - radius, radius, radius); 

:

당신은 단순히 아크와 경로를 만드는 공을 대신 그려

: 당신이 다른 크기로 그려해야하는 경우

drawImage(ballImage, x - radius, y -radius); 

단순히 호출을 확장 이 방법이 다른 두 가지 방법보다 성능이 뛰어나지 만 유연하지는 않습니다.

유연성과 성능 사이의 균형이 필요한 경우 클리핑 방식이 최적의 것으로 나타납니다 (브라우저마다 다를 수 있으므로 테스트).

Here's an online demo with drawImage

Answer 2

drawImage 기능을 확인하십시오. 이렇게하면 캔버스의 좌표 지점에 이미지를 그릴 수 있습니다. Image 인스턴스를 첫 번째 매개 변수로 사용하고 다양한 위치 및 자르기 값을 사용합니다. MDN이 페이지에서 인용하자면 위에 링크 :

drawImage(image, dx, dy, dw, dh, sx, sy, sw, sh)

이미지 상황에 그릴의 요소; 명세는 어떤 이미지 요소 (즉, <img>, <canvas> 및 <video>)를 허용합니다. Firefox를 포함한 일부 브라우저에서는 임의의 요소를 사용할 수 있습니다.

dx 원본 이미지의 왼쪽 위 모퉁이를 배치 할 대상 캔버스의 X 좌표입니다.

dy 원본 이미지의 왼쪽 위 모퉁이를 배치 할 대상 캔버스의 Y 좌표입니다.

dw 대상 캔버스에서 이미지를 그릴 폭. 이렇게하면 그려진 이미지의 크기를 조정할 수 있습니다. 지정하지 않으면 그릴 때 이미지의 너비가 이되지 않습니다.

dh 대상 캔버스에서 이미지를 그릴 높이. 이렇게하면 그려진 이미지의 크기를 조정할 수 있습니다. 지정하지 않으면 이미지를 그릴 때 높이가 조정되지 않습니다.

sx 대상 이미지에 그릴 원본 이미지의 왼쪽 위 모서리의 X 좌표입니다.

sy 대상 이미지로 그릴 원본 이미지의 왼쪽 위 모퉁이의 Y 좌표입니다.

sw 대상 이미지로 가져올 원본 이미지의 하위 사각형의 너비입니다. 지정하지 않으면 전체 사각형이 에서 sx 및 sy에 의해 지정된 좌표가 의 오른쪽 하단 모서리에 지정됩니다. 음수 값을 지정하면 그릴 때 이미지가 가로로 뒤집 으면 이됩니다.

sh 대상 컨텍스트에 그리는 소스 이미지의 하위 사각형의 높이입니다. 음수 값을 지정하면 그릴 때 이미지가 세로로 뒤집 힙니다.

경우에 따라 경로 그리기 기능을 drawImage으로 바꿉니다. 이제

/// create a pattern 
var pattern = context.createPattern(img, 'repeat'); 

: 공

당신이 패턴으로 사용할 이미지 정의를 채우기 위해 사용 패턴 -

방법 1 :

var img = new Image; 
img.onload = function() { 
    //You have to make sure the image is loaded first 
    //Begin rendering! 
    render(); 
}; 

img.src = "path/to/your/ball/img.png" 

function render() { 
    var ball; 
    context.fillStyle = "#008800"; 
    for (var i = 0; i <balls.length; i++) { 
    ball = balls[i]; 
    ball.x = ball.nextx; 
    ball.y = ball.nexty; 
    context.drawImage(img, ball.x - (img.width/2), ball.y - (img.height/2)); //Make x, y the centerpoint 
    } 
}