前言
在学习 HTML5 的 Canvas 标签时， 看了文档后， 自己写了一下， 发现遇到了一个问题。
当我想改变画布的的大小的时候， 通常想到的是通过 CSS 样式来改变， 如：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<style>
#test-canvas {
width: 300px;
height: 300px;
background-color: #ccc;
}
</style>
<canvas id="test-canvas">
<p>你的浏览器不支持Canvas</p>
</canvas>
<script>
var canvas = document.getElementById("test-canvas");
// 拿到CanvasRenderingContext2D对象
var ctx = canvas.getContext("2d");
// 绘制一个边长为100像素的张方形
ctx.strokeRect(0, 0, 100, 100);
</script>
但是结果始料不及！！！绘制出来是这样的：
上面所绘制的明显不是一个正方形， 而是一个矩形。
本着一名当代大学生的探索精神，由果溯因。首先我想到的是 document.getElementById(“test-canvas”) 所获取到的是一个对象， 那么这个对象里面有什么呢？于是 console.dir() 了一下1
2var canvas = document.getElementById("test-canvas");
console.dir(canvas);
然后发现该对象中的两个属性
也就是说 Canvas 的画布大小是 300 x 150, 而我自己定义的 CSS 样式大小是 300 x 300， Canvas 所绘制的图形会被拉伸。于是我又测量了一下：
发现 Canvas 绘制的边长为 100 的正方形被拉伸到 100 x 200。 而之前 CSS 里面设定是 300 x 300, Canvas 画布默认大小为 300 x 150, 两者之间的高宽比就是 2 : 1, 所以正方形的高度被拉伸至 100 x 2 = 200， 宽度被拉伸至 100 x 1 = 100， 于是便有了上面那个 100 x 200 的矩形。
那么也就是说 CSS 里面设置画布大小， 会导致画布按设定的值按比例缩放拉伸， CSS 里所设的大小只是设置画布在屏幕上显示的大小
也就是说， CSS 里面设置的不是画布真实的大小， 所以要设置 Canvas 画布的大小， 那只有在 HTML 属性中， 或是使用 JavaScript DOM 操作进行设置。
设置 HTML 属性：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<style>
#test-canvas {
background-color: #ccc;
}
</style>
<!--设置HTML属性-->
<canvas id="test-canvas" width="300" height="300">
<p>你的浏览器不支持Canvas</p>
</canvas>
<script>
var canvas = document.getElementById("test-canvas");
// 拿到CanvasRenderingContext2D对象
var ctx = canvas.getContext("2d");
// 绘制一个边长为100像素的张方形
ctx.strokeRect(0, 0, 100, 100);
</script>
JavaScript 设置：1
2
3
4
5
6
7var canvas = document.getElementById("test-canvas");
// 设置其对象属性
canvas.width = 200;
canvas.height = 200;
// 拿到CanvasRenderingContext2D对象
var ctx = canvas.getContext("2d");
ctx.strokeRect(0, 0, 100, 100);
注： 以上所用截图工具， 屏幕尺子在我以前写的博客 我所收集的 Windows 系统下的神器 中的截图工具， 很强大！