关于 canvas 的两个常见错误

版权声明：本文为博主原创文章，若转载请注明出处且不得删改。（如有错误请提出指正，部分文章会参考其他文章，已经表明参考出处，如有侵权请联系删除） https://blog.csdn.net/qq_34902437/article/details/80995672

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

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

我们拿矩形来举例子

HTML ：

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

CSS ：

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

JS ：

var c_rect = document.querySelector('#canvasRect');
var ctx = c_rect.getContext('2d');
ctx.fillRect(0,0,100,100);

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

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

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

补充：在 canvas 中的所有关于长度和宽度的设置都是局域 300px 和 150px 的初始值的比例进行的。
比如，你在单独设置了 canvas 的长宽为 600px 和 300px 后，如果设置线条

lineTo（10，20）

实际上 lineTo 的值是（20，40），因为你本身的画布（600，300）是默认尺寸的（300，150）的两倍。而 canvas 是基于比例进行缩放的。

Uncaught TypeError: Cannot read property ‘getContext’ of null

在 js 中设置了

var c_rect = document.querySelector('#canvasRect');
var ctx = c_rect.getContext('2d');

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