案例：使用canvas在页面中绘制一个红色的正方形
1、插入canvas元素
<body>
<canvas width="512" height="512"></canvas>
</body>需要注意的地方：canvas元素的width和height 指的是画布的宽高，此属性为画布宽高。而css 属性的宽高，是响应canvas 在页面上呈现的大小，即样式宽高。
2、canvas的坐标系
3、使用canvas绘制几何图形
// 获取camvas上下文
const canvas = document.querySelector('canvas');
// 获取2d上下文
const context = canvas.getContext('2d');
//在画布中心点绘制绘制100*100的正方形,因为左上角的坐标系是(0,0),右下角是canvas的画布坐标，
//（canvas.width，canvas.hegiht ），因此中心点的坐标就是（context.rect(0.5*canvas.width, // 0.5*canvas.hegiht, 100, 100）
const rectSize = [100, 100];
context.fillStyle = 'red';
context.beginPath();
context.rect(0.5 * canvas.width, 0.5 * canvas.height, ...rectSize);
context.fill();效果如下：
可以看到，小正方形并没有在画布的中心，原因是，设置坐标点的时候，将参数x和y 设置成画布宽高的一半。而rect 指令的x、y 的值，表示的是，要绘制出的矩形的左上角坐标而不是中心点的坐标。解决方案；
方法一：重新计算rect的x、y参数，等于画布的宽高的一半分别减去矩形自身宽高的一半，代码如下：
context.rect(0.5 * (canvas.width - rectSize[0]), 0.5 * (canvas.height - rectSize[1]), ...rectSize);方法二：给画布设置平移变化，在进行绘制，代码如下：
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);
两种方法对比：
第一种方法：操作简单，易理解，弊端：如果是不规则图形，就会很麻烦
第二种方法：对canvas画布的整体做一个平移操作，这样，只需获取中心点与左上角的偏移，然后对画布设置translate变换就可以，不需要再去改变图形的顶点位置。不过，这样操作会导致改变画布的状态，因此要把画布状态恢复回来。
恢复画布的方法，第一种方向平移，代码如下：
// 平移
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);
... 执行绘制
// 恢复
context.translate(0.5 * rectSize[0], 0.5 * rectSize[1]);第二种方法：canvas 上下文提供了save和restore 方法，可以暂存和恢复画布的某个时刻的状态。save指令，不仅可以保存当前的translate状态，还可以保存其他信息，比如，fillstyle等，而restore指令则可以将状态指令恢复成成save前的指令。代码如下：
context.save(); // 暂存状态
// 平移
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);
... 执行绘制
context.restore(); // 恢复状态
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
