添加文本工具，在Html5画布上拖放并调整其大小

Adding Text Tool,drag,drop and resize it on Html5 canvas

本文关键字：拖放 调整 工具 文本 Html5 添加      更新时间：2023-09-26

我正在构建一个HTML5画布应用程序。在这种情况下，我需要将文本添加到画布，将其拖放到画布上并调整其大小。

基于这两个示例：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrophttp://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;}

希望对您有所帮助。

相关文章：