一知画布canvas的宽度， 求平均分配计算的公式

Question

   <canvas id="cavsElem"></canvas>
   
   function() {
      var canvas = document.querySelector('#cavsElem');
      canvas.width = 664;
      canvas.height= 500;
      var ctx = canvas.getContext('2d');
      ctx.scale(2, 2);
      ctx.fillText('小红', x, 10);
      ctx.fillText('小花', x, 10);
      ctx.fillText('小敏', x, 10);
      ctx.fillText('小光', x, 10);
   }

一个画布的宽是664， 想让 小红，小花，小敏，小光四个人在画布上平均分布，每一个人所占的宽度都相等，所以他们的x坐标的值怎么用公式算比较好？ 求大神们帮忙看看。

Answer 1

4个名字宽度相等的话，有五个间距，（664 - 4 * 名字宽度）/ 5 ，结果就是第一个的x

Answer 2

四个人那么先分四份，664/4=166，得到四个x，[0，166，332，498]

再让文字相对于这四个位置偏移。有一个api可以测量文字宽度，假设是w，(166-w)/2，这是每一份中文字两侧的距离，再加上每一份的x，就可以得到每个名字相对于整体的偏移了

Answer 3

建议使用 dom2image 或 html2canvas 这样的绘图库，把布局计算的问题转为 css 排版问题，这样在这里随便一问就能拿到一堆现成的答案。
比如这个分配的问题用弹性布局瞬间就解决了。

Answer 4

664 / 4 分成四份呗。

var col = 664/4
for(var i = 0; i < 4; i++){
    console.log(`left:${col * i}，width:${col}=》【${col * i}-${col * i + col}】`)
}