当前位置：网站首页>canvas绘图——如何把图形放置画布中心

canvas绘图——如何把图形放置画布中心

2022-06-11 03:06:00 【~ climber ~】

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

原网站

版权声明
本文为[~ climber ~]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_36430673/article/details/125116565

当前位置：网站首页>canvas绘图——如何把图形放置画布中心

canvas绘图——如何把图形放置画布中心

边栏推荐

猜你喜欢

随机推荐