HTML5 Canvas가 크롬에서 제대로 작동하지 않네요
본문
index에 적용해 보았습니다.
글 2개와 이미지 2개를 하나의 캔버스에 넣어보았습니다.
I'm sorry, my fault ugly.만 뜨고
중간 이미지 위에 올린 16 글자와 이미지 2개가 크롬에서 뜨지 않네요.
'새로고침'을 해야만 뜨네요.
소스를 잘못 적용한 부분이 있을까요?
(IE8에서는 깨지는 것이 정상입니다. IE9 이상에서만 정상적으로 뜨는 모양입니다)
아래는 최신글 시작에서 부터 끝까지 입니다.
<!-- 최신글 시작 { -->
<div style="text-align:right">
<font size=4><b>HTML5 <font color="#8AC007">Canvas</font></b></font><br>
크롬에서도 제대로 작동하지 않네요. 내용이 보이지 않으면 '새로고침'을 해 보세요.<br>
<br>
<canvas id="myCanvas" width="985" height="878">
<img id="numbers" src="<?php echo G5_IMG_URL ?>/numbers.jpg" width="580" height="905">
<img id="praying" src="<?php echo G5_IMG_URL ?>/index_example_3_praying.png" width="124" height="180">
<font color=red>Your browser does not support the HTML5 canvas tag.</font></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("numbers");
ctx.drawImage(img,202,30);
var img=document.getElementById("praying");
ctx.drawImage(img,825,698);
ctx.font="26px Segoe UI";
ctx.fillStyle="white";
ctx.fillText("16",487,542);
ctx.font="50px Segoe UI";
ctx.strokeStyle="red";
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=2;
ctx.shadowColor="rgba(250,0,0,0.5)";
ctx.strokeText("I'm sorry, my fault ugly.",30,50);
</script>
</div>
<div> </div>
<div style="text-align:right; vertical-align:bottom">
2014. 4. 16. Pray for South Korea. <img src="<?php echo G5_IMG_URL ?>/index_example_3_Yellow Ribbon.jpg">
</div>
<!-- } 최신글 끝 -->그리고... 16 글자에 아래 소스를 적용하고픈데...
I'm sorry, my fault ugly.까지 함께 적용이 되어 버리더군요.
ctx.rotate(20*Math.PI/180);
답변 1
http://stackoverflow.com/questions/10931398/drawimage-canvas-is-not-working
var img=document.getElementById("numbers");
img.onload = function() {
ctx.drawImage(img,202,30);
};
요렇게 해보세요~
var img=document.getElementById("numbers");
img.onload = function() {
ctx.drawImage(img,202,30);
};
요렇게 해보세요~
그래도 해결은 안되지만 고맙습니다.
링크해주신 주소도 참고해보겠습니다~
var img=document.getElementById("numbers");
img.onload = function() {
ctx.drawImage(img,202,30);
}
var img2=document.getElementById("praying");
img2.onload = function() {
ctx.drawImage(img2,825,698);
}
var img, var img2 두개로 선언하구요~
크롬 Version 34.0.1847.116 Built on Debian 7.1 에서 테스트해봤습니다.
먼저 올려주신 소스에서는 제일 뒤에 '};'로 되어 있었는데... 그 때문에 구현되지 않았나 봅니다.
집에 가서 적용해 봐야겠네요.
귀한 시간 내어 시험해주셔서 정말 고맙습니다~^^
네~ 잘 해결하시구요~^^
링크는 삭제하겠습니다~ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.