添加文本工具，在Html5畫布上拖放它並調整其大小

Question

我正在構建HTML5畫布應用程序。在這我需要添加一個文字到畫布上，在畫布上拖放和調整它的大小。

Answer 1

基於這兩個例子：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text

我必須建立一個例子，可以幫助你在你需要做什麼： http://jsbin.com/ufiSilu/1/

JavaScript代碼：

function allowDrop(ev) 
{ 
    ev.preventDefault(); 
} 

function drag(ev) 
{ 
    ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) 
{ 
    ev.preventDefault(); 
    var data=ev.dataTransfer.getData("Text"); 

    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.font="30px Arial"; 
    ctx.fillText(document.getElementById(data).innerHTML,10,50); 

} 

HTML：

<canvas id="myCanvas" width="200" height="100" 
    ondrop="drop(event)" ondragover="allowDrop(event)">  
</canvas> 

<p id="myText" draggable="true" ondragstart="drag(event)"> drag me </p> 

CSS：

#myCanvas {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 

希望它幫助。