Canvas fill / strokeText将随机标记添加到画布

时间:2013-11-17 23:53:55

标签: javascript angularjs text canvas

所以我一直在研究这个画布绘图应用程序。它的一个组件允许您使用填充和描边文本方法将文本添加到画布。

有时,在添加文本时,会出现随机标记,通常是点或线。

First Example

Second Example

以下是添加它的代码。它在Angular.js。

  /* Accept */
  accept.addEventListener('click', function(e) {
    var lines = text.value.split('\n'); // Split based on line break
    // For each line break, draw the text
    for(var i=0; i<lines.length; i++) {
      // Calculate the next line
      var y = parseInt(coords.y) + (40*i); // Mostly arbitrary number, the font size is 37
      $scope.ctx.strokeText(lines[i], coords.x, y);
      $scope.ctx.fillStyle = $scope.canvas.modes.create.instruments.defaults.strokeStyle;
      $scope.ctx.fillText(lines[i], coords.x, y);
      $scope.ctx.fill();
      $scope.ctx.stroke();
    }
    // Make hitory
    $scope.makeHistory();
    // remove the text box
    $element.remove();
  }, false);

以前有人见过这样的事吗?

谢谢!

编辑:

基于评论建议,这里有更多信息:

Adding text.

Text added, with marking.

记录的文本输出:Such string. Many texts. Wow.

0 个答案:

没有答案