canvas是html5的新標簽，是個可以繪製圖形的畫布，畫布的預設大小為300x150。在自定義繪製畫布大小的時候有註意的問題，就是 用樣式來設置高度和寬度的時候 比如 您的瀏覽器不支持H5畫布屬性 var canvas = document.getElementById("canvas"); v ...
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>結果和上面的圖是一樣的，各位可以自己試一下。
