파트 II - 시계 얼굴을 그립니다
시계는 시계 얼굴을 필요로한다. 시계 얼굴을 그릴 수있는 자바 스크립트 함수를 만듭니다 :
자바 스크립트 :
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();