將多個文本實例添加到HTML5畫布中

我在互聯網上發現了這段代碼，並且一直在玩它。它將文本添加到畫布上的任何點。然而，當新的文字被添加到畫布時，前面的文字被刪除，這是很棒的。有多個文本同時存在的簡單方法嗎？將多個文本實例添加到HTML5畫布中

我是JS的新手，在保存新文本後刪除文本的代碼中看不到任何內容。我真的很希望我不必將所有文本與x和y座標一起保存在數組中，我遠遠不夠熟練。

我正在使用的代碼如下，但不會工作沒有一些外部的JS，所以這裏是一個鏈接到我從它複製的工作版本。提前http://oldstatic.travisberry.com/demos/canvas-text-demo/index.html

感謝您的任何建議

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/css.css"> 
</head> 
<body> 
    <div id="main"> 
     <canvas id="c"></canvas><!-- the canvas --> 
    </div> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript" src="text.js"></script><!-- Library to help text --> 
    <script type="text/javascript"> 
$('#c').mousedown(function(e){ 
      if ($('#textAreaPopUp').length == 0) { 
       var mouseX = e.pageX - this.offsetLeft + $("#c").position().left; 
       var mouseY = e.pageY - this.offsetTop; 

       //append a text area box to the canvas where the user clicked to enter in a comment 
       var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>"; 
       var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>"; 
       var appendString = textArea + saveButton; 
       $("#main").append(appendString); 
      } else { 
       $('textarea#textareaTest').remove(); 
       $('#saveText').remove(); 
       //$('#textAreaPopUp').remove(); 
       var mouseX = e.pageX - this.offsetLeft + $("#c").position().left; 
       var mouseY = e.pageY - this.offsetTop; 
       //append a text area box to the canvas where the user clicked to enter in a comment 
       var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>"; 
       var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>"; 
       var appendString = textArea + saveButton; 
       $("#main").append(appendString); 
      } 
     }); 

     function saveTextFromArea(y,x){ 
      //get the value of the textarea then destroy it and the save button 
      var text = $('textarea#textareaTest').val(); 
      $('textarea#textareaTest').remove(); 
      $('#saveText').remove(); 
      $('#textAreaPopUp').remove(); 
      //get the canvas and add the text functions 
      var canvas = document.getElementById('c'); 
      var ctx = canvas.getContext('2d'); 
      var cw = canvas.clientWidth; 
      var ch = canvas.clientHeight; 
      canvas.width = cw; 
      canvas.height = ch; 
      //break the text into arrays based on a text width of 100px 
      var phraseArray = getLines(ctx,text,100); 
      // this adds the text functions to the ctx 
      CanvasTextFunctions.enable(ctx); 
      var counter = 0; 
      //set the font styles 
      var font = "sans"; 
      var fontsize = 12; 
      ctx.strokeStyle = "rgba(0,0,0,1)"; 
      ctx.shadowOffsetX = 0; 
      ctx.shadowOffsetY = 0; 
      ctx.shadowBlur = 0; 
      ctx.shadowColor = "rgba(0,0,0,1)"; 
      //draw each phrase to the screen, making the top position 20px more each time so it appears there are line breaks 
      $.each(phraseArray, function() { 
       //set the placement in the canvas 
       var lineheight = fontsize * 1.5; 
       var newline = ++counter; 
       newline = newline * lineheight; 
       var topPlacement = y - $("#c").position().top + newline; 
       var leftPlacement = x - $("#c").position().left; 
       text = this; 
       //draw the text 
       ctx.drawText(font, fontsize, leftPlacement, topPlacement, text); 
       ctx.save(); 
       ctx.restore(); 
      }); 
      //reset the drop shadow so any other drawing don't have them 
      ctx.shadowOffsetX = 0; 
      ctx.shadowOffsetY = 0; 
      ctx.shadowBlur = 0; 
      ctx.shadowColor = "rgba(0,0,0,0)"; 
     } 

     function getLines(ctx,phrase,maxPxLength) { 
      //break the text area text into lines based on "box" width 
      var wa=phrase.split(" "), 
      phraseArray=[], 
      lastPhrase="", 
      l=maxPxLength, 
      measure=0; 
      ctx.font = "16px sans-serif"; 
      for (var i=0;i<wa.length;i++) { 
       var w=wa[i]; 
       measure=ctx.measureText(lastPhrase+w).width; 
       if (measure<l) { 
        lastPhrase+=(" "+w); 
       }else { 
        phraseArray.push(lastPhrase); 
        lastPhrase=w; 
       } 
       if (i===wa.length-1) { 
        phraseArray.push(lastPhrase); 
        break; 
       } 
      } 
      return phraseArray; 
     } 
    </script> 
    <script src="js/text.js"></script> 
    <script src="js/js.js"></script> 
</body>

來源

2014-02-22 Sam

的原因是，畫布大小設置每次。當發生這種情況：

當用戶代理設置位圖尺寸，寬度和高度，它必須執行下列步驟：

...
3.調整刮位圖新寬度和高度和清除它完全透明的黑色。

Source

所以要做的第一件事是預設的大小或者在元素標記畫布元件（如下所示）上，或在代碼中的父範圍：

<div id="main"> 
    <canvas id="c" width=500 height=300></canvas> <!-- any size you want --> 
</div>

然後從JavaScript的刪除這些行：

function saveTextFromArea(y,x){ 
     ...snipped for example... 
     var canvas = document.getElementById('c'); 
     var ctx = canvas.getContext('2d'); 
     var cw = canvas.clientWidth; 
     var ch = canvas.clientHeight; 
     //canvas.width = cw;    // remove this line 
     //canvas.height = ch;   // remove this line 

     ...snipped for example...

來源

2014-02-22 13:36:13 K3N

感謝的人，工作一個魅力！ – Sam

將多個文本實例添加到HTML5畫布中

回答

相關問題