在学习 canvas 中遇到的两个问题，特此总结

设置的图形宽高和显示的不一样

我们拿矩形来举例子

HTML ：

<canvas id="canvasRect"></canvas>

• 1

CSS ：

canvas{

width: 300px;

height: 300px;

border: 1px solid black;

}

• 1
• 2
• 3
• 4
• 5

JS ：

var c_rect = document.querySelector('#canvasRect');

var ctx = c_rect.getContext('2d');

ctx.fillRect(0,0,100,100);

• 1
• 2
• 3

理论上，显示的矩形应该是一个正方形，因为宽高都是 100px，但是实际图像

解释：MDN是这样解释的，这是因为 canvas 如果没有设置宽高，默认是 300px 和 100px，如果你要自己设置宽高，就需要是 300px 和 100px 的倍数，否则图形将发生扭曲。

比如我将上面的 canvas 宽高设置为 600px 和 300px，这样再设置矩形的宽高 100，100.

Uncaught TypeError: Cannot read property ‘getContext’ of null

在 js 中设置了

var c_rect = document.querySelector('#canvasRect');

var ctx = c_rect.getContext('2d');

• 1
• 2

但是报错。这是因为你的 js 代码放在了 body 前面，放在 body 的后面即可。