기본 콘텐츠로 건너뛰기

html5 canvas 이용 샘플과 한글 깨짐 처리

참조 링크는 http://div.or.kr/html-studying/%ED%95%9C%EA%B8%80%20%EA%B9%A8%EC%A7%90%20%EB%AC%B8%EC%A0%9C

<meta charset="utf-8"> 가 추가 되어야 한다.

 아래는 html5 이용한 간단한 canvas 이용 예제인데 한글이 깨져서 위의 태그를 넣고 정상 출력을 확인했
다.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

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

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

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

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFFF00";
ctx.fillRect(0,0,150,75);

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

//var c=document.getElementById("myCanvas");
//var ctx=c.getContext("2d");
ctx.fillStyle="#000000";
ctx.font="30px 굴림체";
ctx.strokeText("안녕 World",10,50);

var c2=document.getElementById("myCanvas2");
var ctx2=c2.getContext("2d");
ctx2.moveTo(0,0);
ctx2.lineTo(200,100);
ctx2.stroke();


var c3=document.getElementById("myCanvas3");
var ctx3=c3.getContext("2d");
ctx3.beginPath();
ctx3.arc(95, 50, 40, 0, 2*Math.PI);
ctx3.stroke();

</script>

</body>
</html>

라벨:

댓글

댓글 쓰기