Javascript 添加文本工具,在Html5画布上拖放并调整其大小
我正在构建一个HTML5画布应用程序。因此,我需要在画布上添加文本,在画布上拖放文本并调整其大小。基于以下两个示例: 我创建了一个示例,可以帮助您了解需要做什么: JavaScript代码:Javascript 添加文本工具,在Html5画布上拖放并调整其大小,javascript,html5-canvas,Javascript,Html5 Canvas,我正在构建一个HTML5画布应用程序。因此,我需要在画布上添加文本,在画布上拖放文本并调整其大小。基于以下两个示例: 我创建了一个示例,可以帮助您了解需要做什么: JavaScript代码: function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { e
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>
#myCanvas {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}