JavaScript 캔버스 깃털 호

현재 캔버스 태그로 호를 그리는 중이며 호의 가장자리를 깃털 (연화) 할 수 있는지 묻는 질문을 받았습니다. 이것이 가능한가? 검색 및 검색은 가치가있는 것보다 더 번거로운 것처럼 보입니다.JavaScript 캔버스 깃털 호

나는 Mdn도 살펴 보았지만 요소 페더 링을위한 리소스는 드문 것처럼 보였다.

출처

2012-11-22 Dave Mackintosh

요청하신 내용의 스크린 샷을 제공해 주시겠습니까? 나는 생각한다 * 나는 알고있다. 그러나 나는 데모에서 시간을 보내고 벗어나고 싶지 않다. – Loktar

그래서 인터넷에서 발견 된 clearArc 프로토 타입과 함께 사용하기 위해 이러한 라인을 따라 효과를 찾고 있습니다. 가능하다면 거래 차단기가 아닐 수도 있습니다. http://www.jma.duq.edu/classes/shepherd/jma260-03-and-04/Photoshop/Toolbox/feather-ex.jpg –

shadowColor/shadowBlur를 사용해 보셨나요? – kangax

댓글에서 링크 된 이미지에서 그림자를하려는 것 같습니다. 이 코드

enter image description here

을 :

c.beginPath(); 
c.arc(33, 33, 22, 0, Math.PI, false); 
c.shadowOffsetX = 2; 
c.shadowOffsetY = 2; 
c.shadowBlur = 5; 
c.shadowColor = 'rgba(0, 0, 0, 0.8)'; 
c.fillStyle = "red"; 
c.fill();

Demonstration

을 아니면 당신이 할하려는이 경우

, 당신은이 작업을 수행 할 수 있습니다 이 :

enter image description here

c.beginPath(); 
c.arc(33, 33, 22, 10, Math.PI*2, false); 
c.lineWidth = 2; 
var gradient = c.createLinearGradient(20, 0, 50, 40); 
gradient.addColorStop(0, "white"); 
gradient.addColorStop(0.5, 'red'); 
gradient.addColorStop(1, "white"); 
c.strokeStyle = gradient; 
c.stroke();

Demonstration

출처

2012-11-23 15:08:03

이것은 속임수를 쓰는 것처럼 보입니다. 불행히도 지금 당장은이 방법을 시도 할 수는 없지만 내일 볼 수 있으며 어떻게 진행되는지 알려줄 것입니다. –

터치 이벤트가있는 iPad에서는 성능이 좋지 않았지만 완벽하지는 않았지만 솔루션으로 표시했습니다. 나는 아이디어를 버렸지 만, 다시 고마워. –

는 불행히도 깃털 옵션 (아직) 없다, 그러나 this question 대답 사람은 아마 당신 RGBA 구배를 사용하여 달성하고자하는 것과 아주 가까이 오는이 바이올린을했다 : http://jsfiddle.net/chdh/MmYAt/

,369 :

gradient.addColorStop(0, "rgba("+r+","+g+","+b+",0)");

여기에 자신의 jsfiddle을 참조하십시오

하지만 여전히 약간의 번거 로움이 있습니다. 이 기능 요청을 제출하고 싶습니다만, 나는 어디서 모를 것입니까?

출처

2012-11-23 15:39:06

JavaScript 캔버스 깃털 호

답변

관련 문제