fillStyle에서는 [HTML5 캔버스]

나는이 있습니다. 그들은 다음과 같이 기록하고 있습니다 :fillStyle에서는 [HTML5 캔버스]

var shapes = [ 
[ 1, 1, 1, 1 ], 

[ 1, 1, 1, 0, 
    1 ], 

[ 1, 1, 1, 0, 
    0, 0, 1 ], 

[ 1, 1, 0, 0, 
    1, 1 ], 

[ 1, 1, 0, 0, 
    0, 1, 1 ], 

[ 0, 1, 1, 0, 
    1, 1 ], 

[ 0, 1, 0, 0, 
    1, 1, 1 ] 
];

내가 첫 번째 하나의 색상을 변경하려면

[1,1,1,1] 또는 모양 [0],하지만 난했습니다 무엇 없음 시도한 작품. ctx.fillStyle = 'blue'; 작동하지만 모든 객체의 색상이 변경됩니다.

라이브 버전은 여기에서 볼 수있다 :이 코드에서

http://harlem-shake-it.com/tetris/

출처

2013-04-23 MortenMoulder

각 도형마다 다른 색상을 사용한다고 가정합니다. 보드를 떨어 뜨린 후 보드에 병합되도록 셰이프를 코딩 한 것 같습니다. 각 모양을 다르게 색칠하려면 보드의 각 "완료된"블록에 모양의 색이 지정되어 있는지 확인해야합니다. 이렇게하면 "완료된"블록을 그릴 때 적절한 채움 색상을 설정할 수 있습니다. – markE

, 당신은 현재 객체가 파란색으로 할 것 같은데요?

for (var y = 0; y < 4; ++y) { 
    for (var x = 0; x < 4; ++x) { 
     if (current[y][x]) { 
      ctx.fillStyle = '#0068ff'; 
      drawBlock(currentX + x,currentY + y); 
     } 
    } 
}

그런 경우에는 먼저 블록을 그릴, ctx.save();로 현재 캔버스 상태를 저장 fillStyle에서는를 사용해야하고 ctx.restore(); 수 있습니다. 원하는 경우 블록을 여러 색상으로 채울 수 있어야합니다. 또는이 경우 타락 된 블록을 검정색으로 렌더링하십시오.

너 should also declare a doctype : <!doctype html>. 그리고 the <center> tag is deprecated. CSS를 앞으로 나아가려면 text-align: center;을 사용해야하고, 스타일을 적용 할 때는 margin: 0 auto;을 사용해야합니다.

출처

2013-04-24 02:39:31

좋았어? 이동을 체크 아웃 : http://harlem-shake-it.com/tetris/js/tetris.js 렌더링() 함수에서이 같은 더 많은 ctx.restore – MortenMoulder

에 대한 검색 : \t \t \t \t ctx.save (); \t \t \t \t ctx.fillStyle = '# 0068ff'; \t \t \t \t drawBlock (currentX + x, currentY + y); \t \t \t \t ctx.restore(); –

저장/복원을 넣는 블록을 실제로 그리지 않으므로 색 정보가 절대로 저장되지 않습니다. 블럭이 무엇인지 알고 렌더링 기능 내에서 매번 색상을 추출 할 수있는 정보를 추가해야합니다. 따라서 전체 보드에서 반복 작업을 수행하고 다시 그리는 대신 객체가 떨어지면 최종 드로잉 상태를 변경하고 두 번째 캔버스를 사용하여 동작을 수행하거나 그렇지 않으면 떨어지는 모양 만 제거하십시오. –

fillStyle에서는 [HTML5 캔버스]

답변

관련 문제