0

キャンバス テキストを追加しました

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

ラップテキスト関数():

    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/micelejs/yHnYh/6/

どうもありがとう。

4

1 に答える 1

1

wrapText()呼び出し後、これを使用します。

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

このフィドルを参照してください。

ご了承ください：

  • p0.xあなたの x 座標 (左の境界) です。
  • p0.yはあなたの y 座標 (下の境界) です。
  • metrics.width > maxWidth ? metrics.width : maxWidth関数自体のように計算された幅です。
  • - text.split(' ').length * lineHeightテキストがそれに応じて配置されているため、負の高さです。関数自体のように計算されます
于 2013-07-31T08:14:49.987 に答える