clearRect 文本画布 html5

Question

我在

中添加了一个画布文本

    <canvas id="canvasOne" width="500" height="500">
       Your browser does not support HTML5 Canvas.
    </canvas>

Javascript 代码：

    theCanvas = document.getElementById("canvasOne");
    var context = theCanvas.getContext("2d");
    var text = 'word';

    context.font = '16pt Calibri';
    context.fillStyle = '#333';

    var p0 = {x:x0,y:y0};
    var word = {x:p0.x, y:p0.y, velocityx: 0, velocityy:0};

    var lastTime = new Date().getTime();

    wrapText(context, text, p0.x, p0.y, maxWidth, lineHeight);

wrapText 函数（）：

    function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = context.measureText(testLine);
      var testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        context.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    context.fillText(line, x, y);
  }

如何使用 clearRect() 只删除单词框？

      context.clearRect(word.x, word.y, word.x + offsetX, word.y + offsetY);

更新

通过@Ozren Tkalčec Krznarić 技巧部分解决。但它并没有完全抹去这个词，部分先例没有抹去（见上图）。

您可以在这里看到问题：michelepierri.it/examples/canvas.html

jsfiddle：http://jsfiddle.net/michelejs/yHnYh/6/

非常感谢。

Answer 1

wrapText() 调用后，使用这个：

context.clearRect(
  p0.x, 
  p0.y, 
  metrics.width > maxWidth ? metrics.width : maxWidth, 
  - text.split(' ').length * lineHeight);

见this fiddle。

注意：

• p0.x 是你的 x 坐标（左边界），
• p0.y 是你的 y 坐标（下边界），
• metrics.width > maxWidth ? metrics.width : maxWidth 是你的宽度，按照函数本身计算，
• - text.split(' ').length * lineHeight 是负高度，因为文本已相应对齐；它是在函数本身中计算的