以前用canvas畫(huà)圖時(shí)，都是直接在canvas標(biāo)簽里直接寫(xiě)上寬高，沒(méi)有問(wèn)題，但也沒(méi)有探究過(guò)為什么寬高要直接寫(xiě)在canvas標(biāo)簽里，因?yàn)楦鱾€(gè)資料的例子上都是這么寫(xiě)的。今天王sir提出了一個(gè)問(wèn)題：如果把寬高寫(xiě)在<style>里，看看會(huì)有什么不同。自己試了以下，果然有問(wèn)題。
先看一下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{margin:0;}
canvas{margin:20px;
/*width: 400px;
height: 300px;*/
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width=400 height=300 style="border:1px solid #f00;"></canvas>
<script>
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(200,100);
context.lineWidth=5;
context.stroke();
}
</script>
</body>
</html>
1.寬：400；高：300；直接寫(xiě)在<canvas>里的效果：
2、刪除<canvas>里的寬高，寬：400；高：300；寫(xiě)在<style>里的效果：
為什么兩者的效果會(huì)不一樣呢？
canvas跟其他標(biāo)簽一樣，也可以通過(guò)css來(lái)定義樣式。但這里需要注意的是：canvas的默認(rèn)寬高為300px * 150px,在css中為canvas定義寬高，實(shí)際上把寬高為300px * 150px的畫(huà)布進(jìn)行了拉伸，如果在這樣的情況下進(jìn)行canvas繪圖，你得到的圖形可能就是變形的效果。所以，在canvas繪圖時(shí)，應(yīng)該在canvas標(biāo)簽里直接定義寬高。
