0

Java スクリプトで、HTML5 キャンバスの高さと幅を変更しています。Mozilla、Chrome、opera、safari では動作しますが、IE9 では動作しません。プロパティを設定する必要がありますか?

前もって感謝します

更新:- HTML:-

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

Javascript:-

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;
}
4

2 に答える 2

0

キャンバスに問題が見つかりました。それはスタイルの問題でした。スタイル スクリプトから高さと幅の設定を削除しました。そのため、キャンバスの高さと幅はデフォルト値、つまり高さと幅としてそれぞれ 150 と 300 に上書きされていました。

于 2012-11-30T05:36:55.093 に答える
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>
于 2012-11-29T09:29:29.747 に答える