设置canvas画布大小

canvas的绘制是以画布大小为准的。
canvas的默认画布大小为300×150。

设置canvas画布大小的方法：

// 方法一
<canvas id="test" width="100px" height="100px">canvas>

// 方法二
<canvas id="test">canvas>
<script>
	var canvas = document.getElementById('test');
	canvas.width="100";		// 注意：没有单位
	canvas.height="100";	// 注意：没有单位
	var ctx = canvas.getContext('2d');
	...
script>

注意：不可以在CSS里面直接修改，例如

canvas {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

使用css设置画布的大小，会导致画布按比例缩放你设置的值。（css只是设置canvas在屏幕的显示大小）。

例如：用css设置的width为450，height为300，对应默认的画布大小300×150，宽高比例分别为1.5和2，所以我们设置的矩形的宽（100px）高（100px）实现显示的会是宽：100px×1.5=150px；高：100px×2=200px；