2012-11-29 5 views
0

자바 스크립트에서 HTML5 캔버스의 높이와 너비가 변경됩니다. 그것은 Mozila, Chrome, opera 및 safari에서 작동하지만 IE9에서는 작동하지 않습니다. 어떤 몸이라도 내가 뭘 잘못하고 있는지 말해 줄 수 있나요? 물건을 놓을 필요가 있습니까? 사전IE9의 경우 canvas.height가 변경되지 않습니다

UPDATE에서

감사합니다 : - HTML : -

<body onload="Load();"> 
      <canvas id="myCanvas" width="500" height="300"></canvas> 
</body> 

자바 스크립트 : -

function Load(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext('2d'); 
    img=new Image(); 
    img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header 
    img.onload = function(){ 
    canvas.width = 300; 
    canvas.height = 500; 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.drawImage(img,0,0,canvas.width, canvas.height); 
    } 
} 

CSS : -

.canvas{ 
    height: auto; 
    width: auto; 
    margin : 0px 35px; 
    border:1px solid black; 
    position: relative; 
} 
+0

귀하의 질문에 PHP와 관련이 있습니까? –

+0

PHP 사용자도 도움이 될 것이라고 생각합니다.이 태그를 추가했습니다. – SharpUrBrain

+0

시도한 코드를 공유하십시오. – Amber

답변

0

다음 코드를 사용해보십시오. IE9, Firefox, Chrome에서 작동 중입니다.

<!DOCTYPE html> 
<html> 
<style language="css/text"> 
    .canvas{ 
    height: auto; 
    width: auto; 
    margin : 0px 35px; 
    border:1px solid black; 
    position: relative; 
} 
</style> 

<body onload="Load();"> 
      <canvas id="myCanvas" width="500" height="300"></canvas> 
      <input type="button" onClick="change()"/> 
</body> 

<script> 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext('2d'); 

function Load(){ 
    img=new Image(); 
    //img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header 

    canvas.width = 300; 
    canvas.height = 500; 
    context.fillStyle="#FF0000"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 
    //context.drawImage(img,0,0,canvas.width, canvas.height); 
} 

function change() { 
    canvas.width = 100; 
    canvas.height = 100; 
    context.fillStyle="#FF0000"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 

} 
</script> 
</html> 
+0

@SharpUrBrain 작동 코드가 추가되었습니다. – Amber

+0

0 투표 수락 내일 자신의 답변을 수락 할 수 있습니다. (기각하려면이 상자를 클릭하십시오.) \t 내 캔버스와 관련된 문제를 발견했습니다. 그것은 스타일에 관한 문제였습니다. 스타일 스크립트에서 높이 및 너비 설정을 제거했습니다. 그 때문에 캔버스 높이와 너비가 기본 값 즉 높이와 너비 각각 150과 300으로 대체되었습니다. 어떤 방식 으로든 당신의 친절한 답변 주셔서 감사합니다 Amber :) – SharpUrBrain

0

내 캔버스에서 문제가 발견되었습니다. 그것은 스타일에 관한 문제였습니다. 스타일 스크립트에서 높이 및 너비 설정을 제거했습니다. 그 때문에 캔버스 높이와 너비가 기본 값 즉 높이와 너비 각각 150과 300으로 대체되었습니다.

관련 문제