Fatal编程技术网
  • javascript/
  • 在javascript中绘制文本字段的实现

在javascript中绘制文本字段的实现

javascript text html5-canvas

在javascript中绘制文本字段的实现,javascript,text,annotations,html5-canvas,mouseevent,Javascript,Text,Annotations,Html5 Canvas,Mouseevent,可以在画布上用javascript实现绘画文本功能吗 一个文本按钮说“A”，在画图中点击这个按钮时，应该能够在用户单击鼠标的任何位置在画布上绘制文本框。还应该能够键入text init。还应该能够将此文本框移动到画布上的任何位置 任何建议/解决方案都是值得考虑的 谢谢。这个基本框架应该会让您开始学习 此代码允许用户输入其文本 然后单击画布，在鼠标位置绘制文本 当然，您将希望从这里开始设计它以满足您的需求 下面是代码和小提琴： 正文{背景色：象牙；} 画布{边框：1px纯红；} $（函数（）{

可以在画布上用javascript实现绘画文本功能吗

一个文本按钮说“A”，在画图中点击这个按钮时，应该能够在用户单击鼠标的任何位置在画布上绘制文本框。还应该能够键入text init。还应该能够将此文本框移动到画布上的任何位置

任何建议/解决方案都是值得考虑的

谢谢。

这个基本框架应该会让您开始学习

此代码允许用户输入其文本

然后单击画布，在鼠标位置绘制文本

当然，您将希望从这里开始设计它以满足您的需求

下面是代码和小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var lastX；
血管成形术；
var strokeColor=“红色”；
var strokeWidth=2；
canMouseX变种；
var canMouseY；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
功能手柄向下（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
$（“#downlog”）.html（“Down:“+canMouseX+”/“+canMouseY”）；
//把你的鼠标下的东西放在这里
var text=document.getElementById（“text”）.value；
ctx.font='italic 20px sans serif'；
ctx.fillText（text，canMouseX，canMouseY）；
}
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
}); // end$（函数（）{}）；
首先在此处输入文本



然后单击画布以绘制文本
非常感谢您的回复。这非常有帮助。我将根据我的要求尝试修改此内容。：-） 
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var lastX;
    var lastY;
    var strokeColor="red";
    var strokeWidth=2;
    var canMouseX;
    var canMouseY;
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;


    function handleMouseDown(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      $("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);

      // Put your mousedown stuff here
      var text=document.getElementById("text").value;
      ctx.font = 'italic 20px sans-serif';
      ctx.fillText(text,canMouseX,canMouseY);
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

}); // end $(function(){});
</script>

</head>

<body>


    <p>Enter the text here first</p> 
    <input id="text" type="text" name="text" value="My Text."><br>
    <p>Then click on the canvas to draw the text.</p>
    <canvas id="canvas" width=576 height=307></canvas>

</body>
</html>