canvas宽高理解，即canvas坐标系与屏幕坐标系

canvas在空标签没有任何额外手动添加的属性时，默认宽高为300*150px

// 默认宽高300*150px
<canvas /> 

这里的宽高有两个含义

1. canvas元素宽高为300*150px
2. canvas画布可见区域为300*150px

这时就引出两个坐标系概念，一个是在屏幕上显示的真实尺寸，一个是在canvas内的坐标

<canvas id="test" width="200" height="200" style="width: 400px; height: 400px"/>

以上可以看出在canvas上表现出来的两个坐标系

1. width、height是canvas内的坐标系
2. 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世界坐标系等比例缩放的，会出现内容变形的情况