在学习 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 的后面即可。