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坐標的偏移量）的寬度和高度值