path
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');/*선 그리기1. 패스 시작2. 지정한 패스를 그리기/채우기 메서드 이용3. 패스 닫기*/context.beginPath(); //path 시작context.moveTo(50,50); //시작점을 옮기는 역할context.lineTo(80,80); //왼쪽 작은 직선context.moveTo(140,80);context.lineTo(170,50);context.moveTo(60,150);context.lineTo(170,150);context.closePath();context.stroke(); //이거 없으면 안나옴 매우중요함.}else{alert('브라우저가 캔버스를 지원하지 않습니다.');}};</script></head><body><canvas id="canvas" width="500" height="300"></canvas></body></html>결과
'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글
| HTML5 예제와 연습 캔버스 그리기 (3) 라디안 매스함수 (0) | 2018.12.19 |
|---|---|
| HTML5 예제와 연습 캔버스 그리기 (2) (0) | 2018.12.19 |
| HTML5 예제와 연습 캔버스 그리기 fillRect(3) (0) | 2018.12.19 |
| HTML5 예제와 연습 캔버스 그리기 fillRect(2) (0) | 2018.12.19 |
| HTML5 예제와 연습 캔버스 그리기 fillRect(1) (0) | 2018.12.19 |