2012-06-08 3 views
3

그래서 저는 빨강, 초록, 파랑의 구성 요소와 그 구성 요소가 어떻게 관련되어 있는지를 보여주는 간단한 색상환을 그려 봅니다. 문제는 내 호 (단순한 1도) 호가 나중에 호의 스트로크를 취하고 있다는 것입니다. 비록 내가 beginPath()closePath()을 사용하고 있다고해도 말입니다.새로운 캔버스 호 스트로크 스타일을 얻으려면 어떻게해야합니까?

현재 진행률은 http://meyerweb.com/eric/css/colors/hsl-from-rgb.html입니다. 가장 안쪽에있는 고리는 그 반지를 위해 의도 된 것이며, 파란색으로 변색되어 검은 색으로 변합니다. 다음에 나오는 링은 녹색으로 변색 만 나타나야하고, 세 번째 링은 검은 색으로 변색되어야합니다. 가장 바깥 쪽의 가장 두꺼운 링은 색조 휠 주위의 전체 스펙트럼을 보여주기위한 것이고, 얇은 스포크에서 볼 수 있습니다 (다른 링에서와 마찬가지로).

드로잉 블록의 순서를 반대로 바꾸면 가장 바깥 쪽 링이 잘리고 모든 내부 링이 엉망이되어 명확하게 스트로크 스타일이 앞으로 나옵니다. 나는 그 문제를 어떻게 또는 왜, 어떻게 극복 할 수 있는지 알 수 없다. 방금 4 개의 개별 객체 (예 : ctx1에서 ctx4까지)를 정의하고 각각을 개별적으로 그려야합니까?

나는 different fillStyle colors for arc in canvas을 보았지만 거기의 추천은 나를 돕지 않는 것 같았다. 다른 인터넷 검색은 사용하지 않았습니다.

답변

1

, 당신은 반올림 할 필요를 그들.

http://jsfiddle.net/M6KbD/

좋아
+0

DOH! 부적절한 값을 처리하기 위해 브라우저를 사용하고있었습니다 (0-255 범위를 초과 할 때와 마찬가지로). 그게 바로 내가 겪었던 문제 다. 고맙습니다! –

+0

새로운 캔버스 프로젝트를 시작할 때마다 꽤 많이 물어 듭니다. – Xanthir

1

나는 당신의 코드를 아주 오래 동안 보지 못했지만 문제는 아마 당신이 모든 것을 그려내는 순서 인 캔버스와 관련이 없다.

네 세트가 있습니다. 맞습니까? 당신이 주문 모든 것이 잘 될 것입니다 변경하면 당신은

... 처음부터 다음 다른 일, 네 번째에서 1, 세 번째에서 두 번째, (1)에서 첫 세트, 1에서 1을 그리는 :

http://jsfiddle.net/muatT/

는 (그것이로 느리게, 난 그냥 전체에 대한 루프 cruft에 복사. 당신은 아마 그 코드를 많이 단순화 할 수 있습니다)

당신은 당신의 RGB 값에 소수점을 사용할 수 없습니다
+0

, 그래서 당신은 각 링에 대한 별도의 루프를했다. 루프의 모든 패스에서 각 링에 하나의 호 세그먼트를 그려야합니다. 필자가 피하려고했던 것입니다. 다른 루프에서 그려야하는 이유가 있습니까? –

+0

Andrew의 진짜 이유를 살펴 보자. 코드는 다음과 같다. 반올림하려면 0 : http://jsfiddle.net/xhHwe/. 나는 당신에게 그에게 대답 신용을 줄 것을 제안 할 것이다 –

+0

와우 - 나는'| 0 '연산을 수행합니다. 자세한 설명을 가르쳐 주시겠습니까? 내 말은, 내가하는 일을 여기에서 볼 수 있지만 모든 가능성에 대해 읽고 싶습니다. 추측 하듯이,'|'을 위해 Google에 노력하는 것은 무의미합니다. –

관련 문제