Canvas的默认宽高为宽300px，高150px。
![[外链图片转存失败(img-5WZDzMan-1562057711531)(http://note.youdao.com/yws/res/15679/114F6BB36AF849B9ABB5F7CFC73A1CD4)]](https://img-blog.csdnimg.cn/20190702165534148.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng==,size_16,color_FFFFFF,t_70)
（因为边框的原因，宽高都多了2）
先画一条简单的线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.canvas{
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body>
<canvas id='myCanvas' class="canvas"></canvas>
<script>
const myCanvas = document.getElementById('myCanvas');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
</script>
</body>
</html>
![[外链图片转存失败(img-j1Sh6goj-1562057711535)(http://note.youdao.com/yws/res/15685/67800EEED98D41E68F658AE5684BF4D3)]](https://img-blog.csdnimg.cn/20190702165552675.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng==,size_16,color_FFFFFF,t_70)
如果想修改画布的宽高可以这样做：<canvas id='myCanvas' class="canvas" width='100px' height="100px"></canvas>
![[外链图片转存失败(img-P4yKExew-1562057711543)(http://note.youdao.com/yws/res/15690/25D317581CF14A0FA1EFDE52D4DE0FA8)]](https://img-blog.csdnimg.cn/20190702165607487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng==,size_16,color_FFFFFF,t_70)
不过一直以来，我们都是在CSS中修改宽高，如果在CSS中修改宽高会怎么样呢？
![[外链图片转存失败(img-BfdXybNC-1562057711554)(http://note.youdao.com/yws/res/15694/C2E50D45D5BD4A8AAE4FCE66848C9156)]](https://img-blog.csdnimg.cn/20190702165620859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng==,size_16,color_FFFFFF,t_70)
这就是修改后的结果，可以看到图像变形了，这是为什么呢？
![[外链图片转存失败(img-mSy16kyD-1562057711556)(http://note.youdao.com/yws/res/15698/E21C728D3BC64A138AE443AAECED0E8A)]](https://img-blog.csdnimg.cn/20190702165633280.png)
![[外链图片转存失败(img-9UdCWohg-1562057711559)(http://note.youdao.com/yws/res/15701/F412965419E8479DBA7D39E00BF40102)]](https://img-blog.csdnimg.cn/20190702165645458.png)
分别输出画布的高和宽，发现它的宽高并没有发生改变。
实际上，画布的宽高确实没有变化，先是在画布上画出了直线，然后再将画布缩放到在CSS中制定的宽高值。