fillRect(3)
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){//Context 객체가 그림을 그려줌var context = canvas.getContext('2d');//채우기 색상 지정context.fillStyle ='rgb(200,0,0)';//색이 칠해져 있는 사각형context.fillRect(10,10,100,100); //x,y,w,h//채우기 색상 및 투명도 지정context.fillStyle = 'rgba(0,0,200,0.5)';context.fillRect(50,50,100,100); //x,y,w,h//특정 영역을 지우고 완전 투명context.clearRect(60,60,40,40);//선의 색상지정context.strokeStyle = 'rgb(200,0,250)';//테두리만 있는 사각형context.strokeRect(200,50,70,150);}else{alert('브라우저가 캔버스를 지원하지 않습니다.');}};</script></head><body><canvas id="canvas" width="500" height="300"></canvas></body></html>결과
'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글
| HTML5 예제와 연습 캔버스 그리기 (2) (0) | 2018.12.19 |
|---|---|
| HTML5 예제와 연습 캔버스 그리기 (표정그려보기) (0) | 2018.12.19 |
| HTML5 예제와 연습 캔버스 그리기 fillRect(2) (0) | 2018.12.19 |
| HTML5 예제와 연습 캔버스 그리기 fillRect(1) (0) | 2018.12.19 |
| HTML5 예제와 연습 vidio audio 추가하기. (0) | 2018.12.19 |