Javascript HTML5画布-在画布上拖动文本问题_Javascript_Html_Canvas

Javascript HTML5画布-在画布上拖动文本问题

javascript html canvas

Javascript HTML5画布-在画布上拖动文本问题,javascript,html,canvas,Javascript,Html,Canvas,我想拖动画布上的文本，我找到了一个如何拖动矩形的教程，但我无法在文本上实现它，这是下面移动矩形的代码，有人能帮我在文本上实现它吗 <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Canvas Drag and Drop Test</title> </head> <body> <section>

我想拖动画布上的文本，我找到了一个如何拖动矩形的教程，但我无法在文本上实现它，这是下面移动矩形的代码，有人能帮我在文本上实现它吗

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>

<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">

var canvas;
var ctx;
var x = 75;
var y = 50;
var dx = 5;
var dy = 3;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;

function rect(x,y,w,h) {
 ctx.beginPath();
 ctx.rect(x,y,w,h);
 ctx.closePath();
 ctx.fill();
}

function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d");
 return setInterval(draw, 10);
}

function draw() {
 clear();
 ctx.fillStyle = "#FAF7F8";
 rect(0,0,WIDTH,HEIGHT);
 ctx.fillStyle = "#444444";
 rect(x - 15, y - 15, 30, 30);
}

function myMove(e){
 if (dragok){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
 }
}

function myDown(e){
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
 e.pageY > y -15 + canvas.offsetTop){
  x = e.pageX - canvas.offsetLeft;
  y = e.pageY - canvas.offsetTop;
  dragok = true;
  canvas.onmousemove = myMove;
 }
}

function myUp(){
 dragok = false;
 canvas.onmousemove = null;
}

init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;

</script>

</section>
</body>
</html>


画布拖放测试
如果您的浏览器不支持HTML5画布，则会显示此文本。
var帆布；
var-ctx；
var x=75；
变量y=50；
var-dx=5；
var-dy=3；
var宽度=400；
var高度=300；
var-dragok=false；
函数rect（x，y，w，h）{
ctx.beginPath（）；
ctx.rect（x，y，w，h）；
ctx.closePath（）；
ctx.fill（）；
}
函数clear（）{
ctx.clearRect（0，0，宽度，高度）；
}
函数init（）{
canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
返回设置间隔（抽签，10）；
}
函数绘图（）{
清除（）；
ctx.fillStyle=“#FAF7F8”；
矩形（0,0，宽度，高度）；
ctx.fillStyle=“#4444”；
rect（x-15，y-15，30，30）；
}
函数myMove（e）{
如果（德拉戈克）{
x=e.pageX-canvas.offsetLeft；
y=e.pageY-canvas.offsetTop；
}
}
函数myDown（e）{
如果（e.pageXx-15+
canvas.offsetLeft&&e.pageYy-15+画布偏移）{
x=e.pageX-canvas.offsetLeft；
y=e.pageY-canvas.offsetTop；
德拉戈克=真；
canvas.onmousemove=myMove；
}
}
函数myUp（）{
dragok=假；
canvas.onmousemove=null；
}
init（）；
canvas.onmousedown=myDown；
canvas.onmouseup=myUp；

而且，当我在HEAD标签中添加此代码时，它也不起作用。为什么会这样？

基本示例

预绑定一个（保留rect函数，添加新文本函数，为文本绘制边界框）

我肯定作弊了。我使用px作为字体大小，以便更容易地获取其宽度。您可以使用em或点，但您只需将其转换为像素即可获得估计的宽度。我基本上只是删除了rect，添加了filltext，并修改了检查以检查文本宽度。

当我将所有脚本代码放入HEAD标记时，为什么这段代码不起作用？在上面的示例中，您没有HEAD的结束标记。还要确保等待dom加载。您可以使用类似window.onDomReady=function（）{Your nifty stuff}；最好的做法是你不应该把JS放在头上，把代码放在页面的底部。实际上我想要一个按钮，当我点击时，会出现一个提示，问我要文本。该文本显示在画布上。如果我再次单击按钮，新文本将与画布上的旧文本一起添加。我将其保存在窗口中。onDomReady=function（）仍然不起作用。我是个乞丐，所以我知道的不多，虽然有人告诉我纸条是放在头上的，你为什么说不要放在头上？还可以查看下面关于将脚本放在底部的链接，