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

试试下面的代码。它适用于 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 回答
0

我发现我的画布有问题。这是风格的问题。我已经从样式脚本中删除了高度和宽度设置。正因为如此，画布的高度和宽度被覆盖为其默认值，即分别作为高度和宽度的 150 和 300。

于 2012-11-30T05:36:55.093 回答