1. 概念
<canvas width="100" height="100"></canvas>
1
Canvas中涉及两个坐标系统：canvas坐标系(model coordinate system)和绘图坐标系(display coordinate system)，默认情况下两者大小相等。
WARNING
canvas坐标系由canvas标签指定(默认大小为300px x 150px)，绘图坐标系由css的width、heigt指定
2. 两坐标系尺寸相同
下面canvas坐标固定大小，宽x高为500x300(像素)。示例图片尺寸为150x150（像素）。
3. 两坐标系尺寸比例相同
浏览器将缩放绘图坐标系尺寸是适配canvas坐标系大小(the browser scales the drawing surface to fit the element)。下面示例保持canvas坐标系大小为500x300
- 绘图坐标系尺寸：
250 x 150；等比例缩小
canvas { width: 250px; height: 150px }
1
- 绘图坐标系尺寸：
550 x 330；等比例放大
canvas { width: 550px; height: 330px }
1
4. 两坐标系尺寸比例不同
- 绘图坐标系尺寸：
400 x 300；X轴被拉伸
canvas { width: 400px; height: 330px }
1
- 绘图坐标系尺寸：
500 x 200；Y轴被拉伸
canvas { width: 500px; height: 200px }
1