Canvas繪製圖片模糊

canvas是html5的新標籤，是個可以繪製圖形的畫布，畫布的默認大小爲300x150。在自定義繪製畫布大小的時候有注意的問題，就是用樣式來設置高度和寬度的時候 比如

    <div style="width:1000px; height: 600px; " id="canvas_size">
        <canvas id="canvas" style="width: 100%; height: 100%; background-color: #eee">您的瀏覽器不支持H5畫布屬性</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.arc(120, 75, 20, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();
    </script>
</div>

他等於是把整個畫布進行了拉伸，這樣繪製出來的圖形是模糊的。

可以看到圓的邊緣是模糊的，而且變成了橢圓？這是因爲畫布還是默認的大小寬300px，高150px，但是用style強行把畫布拉伸到了1000x600。寬度擴大3.33倍，高度擴大4倍，所以變成了橢圓。寬改爲1200就是圓了。

所以不能在樣式裏面設置大小，應該用canvas自帶的width和height屬性來設置高度。看下面的代碼。注意畫圓的參數也改變了

<div style="width:1000px; height: 600px; " id="canvas_size">
    <canvas id="canvas" width="1000px" height="600px" style="background-color: #eee">您的瀏覽器不支持H5畫布屬性</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.arc(500, 300, 200, 0, Math.PI * 2, false);
        ctx.fillStyle = "#000";
        ctx.fill();

    </script>
</div>

所以設置畫布的大小是用canvas自帶的width和height屬性，纔是畫布真正的大小，網上有方法可以解決，但是我沒去試，因爲感覺比較麻煩，還不如直接就是以後就是給固定的大小。有人說這樣子自定義怎麼辦，那簡單，套個div然後在js獲取寬度或者獲取屏幕的寬高然後設置canvas的值就好了。代碼如下。

    <div style="width:1000px; height: 600px; " id="canvas_size">
        <canvas id="canvas" style="background-color: #eee">您的瀏覽器不支持H5畫布屬性</canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var canvas_size = document.getElementById("canvas_size");//獲取div
            var ctx = canvas.getContext("2d");
            canvas.width = canvas_size.offsetWidth;//設置寬
            canvas.height = canvas_size.offsetHeight;//設置高
            ctx.arc(500, 300, 200, 0, Math.PI * 2, false);
            ctx.fillStyle = "#000";
            ctx.fill();

        </script>
    </div>

結果和上面的圖是一樣的，各位可以自己試一下。

總結

canvas的寬高要用自帶的width和height來寫纔是真正的畫布大小，<canvas width="1000px" height="600px" style="background-color: #eee">您的瀏覽器不支持H5畫布屬性</canvas>,自適應用js來設置。