참조 링크는 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 이용 예제인데 한글이 깨져서 위의 태그를 넣고 정상 출력을 확인했
다.
<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>
댓글
댓글 쓰기