HTML
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">window.onload = function(){var canvas = document.getElementById('canvas');if(canvas.getContext){var context = canvas.getContext('2d');/*arc메서드에서 각도는 도(degree)로 표시하지 않고 라디안 값으로 표기함1라디안 은 180/Math.PI, 60도 (Math.PI/180)*60 , 360도 (Math.PI *2)1.5파이(270도)|||1파이(180도) ---중심점 --- 0파이,2파이(0도,260도)|||0.5파이(90도)//(70,70)에서 반시계방향으로 반지름 20픽셀인 원을 그리는데 , 60도 까지만 그리고 태두리만 표시*/context.beginPath();context.arc(70,70,20,0,(Math.PI/180)*60,true);context.stroke();context.beginPath();context.arc(130,110,50,0,Math.PI*2,true);context.closePath(); //360e도 이기때문에 생략 가능context.fillStyle ='rgb(0,200,200)';context.fill();context.stroke();context.beginPath();context.arc(190,70,20,(Math.PI/180)*110,(Math.PI/180)*170,true);context.stroke();}else{alert('브라우저가 캔버스를 지원하지 않습니다.');}};</script></head><body><canvas id="canvas" width="500" height="300"></canvas></body></html>결과
'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글
| HTML5 예제와 연습 캔버스 곡선 그리기 (0) | 2018.12.19 |
|---|---|
| HTML5 예제와 연습 캔버스 그리기 color (0) | 2018.12.19 |
| HTML5 예제와 연습 캔버스 그리기 (2) (0) | 2018.12.19 |
| HTML5 예제와 연습 캔버스 그리기 (표정그려보기) (0) | 2018.12.19 |
| HTML5 예제와 연습 캔버스 그리기 fillRect(3) (0) | 2018.12.19 |