canvas在空标签没有任何额外手动添加的属性时,默认宽高为300*150px
// 默认宽高300*150px
<canvas />
这里的宽高有两个含义
- canvas元素宽高为300*150px
- canvas画布可见区域为300*150px
这时就引出两个坐标系概念,一个是在屏幕上显示的真实尺寸,一个是在canvas内的坐标
<canvas id="test" width="200" height="200" style="width: 400px; height: 400px"/>
以上可以看出在canvas上表现出来的两个坐标系
- width、height是canvas内的坐标系
- style.width、style.height是屏幕的坐标系
const myCanvas = document.getElementById('test');
const ctx = myCanvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
以上代码是在canvas内画对角线,如果按照屏幕坐标系来看,这条线应该从左上角画到矩形的中心
实际上是由左上角画到右下角到对角线
因为style="width: 400px; height: 400px"只不过是把canvas内的坐标系给按照一定比例缩放了
就是高中基础知识,坐标的平移、缩放的这些知识
所以在canvas内有文字或者图片的情况下,不是按照canvas世界坐标系等比例缩放的,会出现内容变形的情况