캔버스 시계 얼굴
파트 II - 시계 얼굴 그리기
시계에는 시계 얼굴이 필요합니다. 시계 페이스를 그리는 JavaScript 함수를 만듭니다.
자바스크립트:
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0, 0 ,radius * 0.95, 0, 0, radius * 1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
코드 설명
시계 페이스를 그리기 위한 drawFace() 함수를 만듭니다.
function drawClock() {
drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}
흰색 원을 그립니다.
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
방사형 그래디언트 생성(원래 시계 반경의 95% 및 105%):
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
호의 내부, 중간 및 외부 가장자리에 해당하는 3가지 색상 정지점을 만듭니다.
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
색상 정지점은 3D 효과를 만듭니다.
그리기 개체의 획 스타일로 그라디언트를 정의합니다.
ctx.strokeStyle = grad;
그리기 개체의 선 너비 정의(반경의 10%):
ctx.lineWidth = radius * 0.1;
원 그리기:
ctx.stroke();
시계 중심 그리기:
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();