Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

3/22 javascript canvas예제 본문

TIS_2016/HTML5_1기

3/22 javascript canvas예제

moozi 2016. 3. 22. 12:20

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="700" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var c = document.getElementById("myCanvas");//캔버스 객체
var brush = c.getContext("2d");//붓역할을 하는 객체
brush.fillStyle = "#FF0000"; //붓의 색상 설정
brush.fillRect(0,0,150,75); //사각형을 그린다.
   
brush.fillStyle="#00FF00"; //붓의 색상 변경.
brush.fillRect(0,75,150,75);   

brush.moveTo(0,0); //시작점
brush.lineTo(150,75); //끝점
brush.stroke();
   
brush.moveTo(150,0);//시작점
brush.lineTo(0,75); //끝점
brush.stroke();
   
brush.beginPath();
brush.fillStyle = "#FF0000"; //붓의 색상 설정   
brush.arc(300,300,100,0,0.5*Math.PI); // 원의 중심(95,50),반지름 40, 360도
brush.fill();
   
brush.fillStyle="#0000ff"; //붓의 색상 변경.   
brush.font = "30px Arial";//폰트, 글자크기
brush.fillText("안녕하세요?",300,500);//300,500위치에 그림.
brush.strokeText("안녕하세요?",300,550);//300,500위치에 그림.   
   
brush.fillStyle="#0000ff"; //붓의 색상 변경.   
brush.font = "30px Arial";//폰트, 글자크기
brush.fillText("1/4분기",0,500);//0,500위치에 그림.   

brush.fillStyle = "#FF0000"; //붓의 색상 설정
brush.fillRect(120,475,120,30); //사각형을 그린다.
   
brush.fillStyle="#0000ff"; //붓의 색상 변경.   
brush.font = "30px Arial";//폰트, 글자크기
brush.fillText("2/4분기",0,550);//0,550위치에 그림. 
   
brush.fillStyle = "#FF0000"; //붓의 색상 설정
brush.fillRect(120,525,60,30); //사각형을 그린다.
   
brush.fillStyle="#0000ff"; //붓의 색상 변경.   
brush.font = "30px Arial";//폰트, 글자크기
brush.fillText("3/4분기",0,600);//0,600위치에 그림.
brush.fillStyle = "#FF0000"; //붓의 색상 설정
brush.fillRect(120,575,180,30); //사각형을 그린다.
   
brush.fillStyle="#0000ff"; //붓의 색상 변경.   
brush.font = "30px Arial";//폰트, 글자크기
brush.fillText("4/4분기",0,650);//0,600위치에 그림.
brush.fillStyle = "#FF0000"; //붓의 색상 설정
brush.fillRect(120,625,30,30); //사각형을 그린다.    
   
   
   
   
   
   
   
   
   
</script>

</body>
</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

AngularJS Custom Filter 예제  (0) 2016.03.23
파이차트그리기  (0) 2016.03.22
javascript 연습문제3  (0) 2016.03.21
3/21 오전 jquery 연습 코드  (0) 2016.03.21
xml 요청 주소 샘플  (0) 2016.03.18
'TIS_2016/HTML5_1기' Related Articles more
Comments