javascript基础有关----canvas的宽高设置

没事看下HTML5，试了下drawImage方法

代码很简单：

<canvas id="canvas"></canvas>
<image src="001.jpg" />
<script type="text/javascript">
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");
var img_url = '001.jpg';
if (ctx){
    var img = new Image();
    img.onload = function(){
        try {
            var w = img.width,h=img.height;
            canvas.style.width = w;
            canvas.style.height = h;
            ctx.drawImage(img,0,0);
        }

        catch (e) {alert(e.message)}      
    }
    img.src = img_url;
}
</script>

一开始画出来的图片死活都是变形的，还显示不全，后来直接给canvas加上比图片大的height与width属性才能正常显示图片，问题是多出来的部分就空白了。

经过几次尝试，最后终于发现问题所在。。。
改动代码如下：

<canvas id="canvas"></canvas>
<image src="001.jpg" />
<script type="text/javascript">
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");
var img_url = '001.jpg';
if (ctx){
    var img = new Image();
    img.onload = function(){
        try {
            var w = img.width,h=img.height;
            canvas.width = w;
            canvas.height = h;
            ctx.drawImage(img,0,0);
        }

        catch (e) {alert(e.message)}      
    }
    img.src = img_url;
}
</script>

哈哈，不注意看是不是感觉其实没什么改动。。。

其实改的就是改变设置canvas宽与高的地方。。。用CSS来设置似乎不起作用，只有直接设置其height与width属性才行。

至于为什么就不得而知了，这里留个坑吧，等以后明白了再填上。。（就怕坑越挖越多。。）

drawImage参数设置如下：

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

*第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。
*dx、dy是image在canvas中定位的坐标值；
*dw、dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；
*sx、sy是image所要绘制的起始位置；
*sw、sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值