案例:使用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(); // 恢复状态