1
캔버스 (2 차 곡선 및 베 지어 곡선으로 그린)로 그린면을 채우기 위해 노력하고 있습니다. 첫 번째 베 지어 곡선 후에 moveTo를 사용하여 다음 곡선 (2 차 곡선)을 만들기 전에 곡선의 끝점 (예 : 약간 중복 됨)으로 향하게합니다. 내가 얼굴 전체를 만든 후에, 나는 채우기를 사용했다. 얼굴은 녹색으로 얼굴을 채우지 만 중간에 흰색 삼각형을 남깁니다. 앞서 언급 한 중복 moveTo()를 제거하면 전체 모양이 의도 한대로 녹색으로 채워집니다. 누군가 이것을 설명 할 수 있습니까?HTML5 Canvas | 뉘앙스와 .moveTo() 및 .fillI()
내 생각/시도 : 삼각형의 포인트는 두 개의 교차 곡선 사이의 점과 동일하기 때문에, 내가 먼저 곡선이 접촉하지 않았기 때문에 그것이라고 생각하고, 다시 갔다
그걸 고쳤다.
moveTo()는 베 지어 곡선의 끝점 위에 '새 점'을 작성하므로 베 지어 곡선 및 다음 곡선 대신 교차하는 새 점과 다음 곡선이됩니다.
내가의 moveTo()의 모질라 개발자 네트워크의 캔버스 튜토리얼 설명에보고하고, '()의 moveTo' '.fill()' '인접 곡선 같은 키워드를 사용하여 여기에 검색 :
는 경우 문의 ''인접한 베 지어 곡선 '. this을 찾았지만 정확히 내가 찾던 것이 아니 었습니다.
HTML 코드 :
<!DOCTYPE html>
<html>
<head>
<title>FACE</title>
</head>
<body>
<canvas id = 'canvas' height = '900' width = '900'></canvas>
<script src = 'face.js'></script>
</body>
</html>
자바 스크립트 코드 여기
var canvas = document.getElementById('canvas'); <br>
var context = canvas.getContext('2d');<br><br>
function greenHeadFront()
{
var rightHeadx = 110.5;
var rightHeady = 80;
var leftHeadx = 40.5;
var leftHeady = 80;
context.moveTo(leftHeadx, leftHeady);
context.bezierCurveTo(leftHeadx+6, leftHeady-40, rightHeadx-6, rightHeady-40, rightHeadx, rightHeady); //TOP OF HEAD
context.moveTo(rightHeadx, rightHeady);
context.quadraticCurveTo(115 , 100 , rightHeadx, rightHeady+30);//RIGHT CHEEK
context.bezierCurveTo (100 , 114, 129, 152, 75, 131); //RIGHT CHIN
context.moveTo(leftHeadx,leftHeady);
context.quadraticCurveTo(35, 100, leftHeadx, leftHeady+30);//LEFT CHEEK
context.bezierCurveTo(53, 120, 23, 148, 75, 131); //LEFT CHIN
context.fillStyle = 'rgb(0,156,0)';
context.fill();
context.stroke();
}
greenHeadFront();
은 사전에 감사합니다!
감사! 나는 그리는 것을 돕기 위해 그리드를 사용하지만 간결함을 위해 여기서 생략했다. – sahaaron