// 計算文字所需的寬度var p = {  x: 10,  y: 10,  name: "測試文字"};var measure = ctx.measureText(p.name);// 求出文字在 canvas 畫板中占據的最大 y 坐標var maxX = measure.width + p.x;// 求出文字在 canvas 畫板中占據的最大 y 坐標// canvas 只能計算文字的寬度，并不能計算出文字的高度。所以就利用文字的寬度除以文字個數計算個大概var maxY = measure.width / p.name.length + p.y;var min = { x: p.x, y: p.y };var max = { x: maxX, y: maxY };// bounds 為該文字在 canvas 中所占據的范圍。// 在取點位坐標作為最小范圍時，textAlign、textBaseline 按照以下方式設置會比較準確。// 如設置在不同的位置展示，范圍最大、最小點也需進行調整// ctx.textAlign = "left";// ctx.textBaseline = "top";var bounds = new Bounds(min, max);

/** * 定義范圍對象 */function Bounds(min, max) {  this.min = min;  this.max = max;}/** * 判斷范圍是否與另外一個范圍有交集 */Bounds.prototype.intersects = function(bounds) {  var min = this.min,    max = this.max,    min2 = bounds.min,    max2 = bounds.max,    xIntersects = max2.x >= min.x && min2.x <= max.x,    yIntersects = max2.y >= min.y && min2.y <= max.y;  return xIntersects && yIntersects;};

// 每次繪制之前先與已繪制的文字進行范圍交叉檢測// 如發現有交叉，則放棄繪制當前文字，否則繪制并存入已繪制文字列表for (var index in _textBounds) {  // 循環所有已繪制的文字范圍，檢測是否和當前文字范圍有交集，如果有交集說明會碰撞，則跳過該文字  var pointBounds = _textBounds[index];  if (pointBounds.intersects(bounds)) {    return;  }}_textBounds.push(bounds);ctx.fillStyle = "red";ctx.textAlign = "left";ctx.textBaseline = "top";ctx.fillText(p.name, p.x, p.y);