1. 선분그리기
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo!(10,10);
ctx.lineTo(150,50);
ctx.lineTo(10,50);
ctx.stroke();
</script>
2. 원 그리기
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(70,18,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</body>
3. 그라디언트 그리기
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);
</script>
</body>
</html>
4. 외부 이미지 불러오기
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="img_flwr.png";
</script>
</body>
</html>
이렇게 하는 것과 <img>태그를 사용하는 것과는 엄연히 다릅니다.
'WEB_TECH > HTML5' 카테고리의 다른 글
| 단말기의 기종을 알아내는 구문 (0) | 2013.06.13 |
|---|---|
| canvas animation 예제입니다. (0) | 2013.05.24 |
| HTML5 사운드 플레이어 만들기1 (0) | 2013.05.23 |
| Geolocation API (0) | 2012.10.25 |
| Google Maps Javascript API V3 (0) | 2012.10.25 |
| 새로운 HTML5 Javascript API (0) | 2012.10.22 |
| <canvas>란 무엇일까? (0) | 2012.10.22 |
| HTML5에서 새로 사용된 엘리먼드들 (0) | 2012.10.22 |
| html5에서 사운드 사용하기 (0) | 2012.08.09 |
