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（）：

    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);

更新

部分解决@OzrenTkalčecKrznarić提示。但它并没有完全抹去这个词，先例的某些部分没有被删除（见上图）。

你可以在这里看到问题：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 coord（底部边界），
• metrics.width > maxWidth ? metrics.width : maxWidth是您的宽度，按函数本身计算，
• - text.split(' ').length * lineHeight是你的负高度，因为文字是相应对齐的;它按照函数本身计算