在使用<canvas>標(biāo)簽時(shí)通常都會(huì)設(shè)置寬高魁亦。而設(shè)置<canvas>的寬高有兩種方式：
1媒惕、在<canvas>標(biāo)簽中直接定義寬高。這種方式是指定可以繪畫的區(qū)域大小摔桦。例如：
<canvas id="drawing" width="200" heigth="200"></canvas>
說明：
- 這種方式定義寬高時(shí)不用加單位端朵。
- <canvas>標(biāo)簽直接定義的width和height是繪畫區(qū)域?qū)嶋H寬度和高度好芭，繪制的圖形都是在這個(gè)上面。
- 若是未定義寬高或值不正確冲呢，則會(huì)被設(shè)置成默認(rèn)的width:300px舍败、height:150px（可使用getComputedStyle在瀏覽器中查看）。
2敬拓、在style中定義寬高邻薯。例如：
//css
.canvas{
width:200px;
heigth:200px;
//other style
}
//html
<canvas id="drawing" class="canvas"></canvas>
說明：
style的width和height是<canvas>在瀏覽器中被渲染的高度和寬度。
通過style設(shè)置寬高可能引起的問題
- 若未定義<canvas>標(biāo)簽的寬高而定義了style的寬高乘凸，則<canvas>標(biāo)簽中繪制的圖片會(huì)進(jìn)行拉伸厕诡，與預(yù)期效果不符。
- 若同時(shí)定義了<canvas>標(biāo)簽的寬高和style的寬高营勤，則以style的寬高為準(zhǔn)灵嫌。
