I am building an HTML5 canvas application. In that i need to add a Text to the canvas,drag,drop and resize it on the canvas.
Based on these two examples:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text
I have build an example that can help you on what you need to do: http://jsbin.com/ufiSilu/1/
JavaScript code:
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;}
hope it helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.