Cal*_*laf 4 html javascript canvas
所以我认为代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Log Canvas Width</title>
<style>
#canvas {
background: #888888;
width: 600px;
height: 600px;
}
</style>
<script>
function draw() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
document.write(canvas.width);
}
</script>
</head>
<body onload="draw();">
<canvas id='canvas'>
Canvas not supported
</canvas>
</body>
</html>
打印 300 而不是 600，因为<body onload="draw();">使脚本在页面加载时运行，而此时画布尚未捕获修改后的值 (600)。
但后来我将代码修改为：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Log Canvas Width</title>
<style>
#canvas {
background: #888888;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<canvas id='canvas'>
Canvas not supported
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
document.write(canvas.width);
</script>
</body>
</html>
现在我想象脚本在画布从嵌入样式中获取属性后运行，我将看到 600。不是真的。即使画布的宽度 = 600，我仍然得到 300。发生了什么？
画布的默认宽度是
300 x 150[ Ref ]。Canvas 不考虑css定义与。您可以定义属性或为元素width/heigh分配这些值。propertiescanvas
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
alert(canvas.width);<canvas id='canvas' width='600'>
Canvas not supported
</canvas>或者
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 600;
alert(canvas.width);<canvas id='canvas'>
Canvas not supported
</canvas>