HTML5 Canvas - 在画布上拖动文本问题答案

【问题标题】：HTML5 Canvas - Dragging Text on Canvas ProblemHTML5 Canvas - 在画布上拖动文本问题
【发布时间】：2011-02-17 04:38:34
【问题描述】：

我想拖动位于画布上的文本，我找到了一个教程 How to Drag a Rectange 但我无法在文本上实现它，这是以下用于移动矩形的代码，有人可以帮我实现吗它在文本上？

<!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>

Test

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

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

基本示例 http://jsfiddle.net/h3BCq/1/

美化了一个（保留了rect函数，添加了新的文本函数，绘制了文本的边界框） http://jsfiddle.net/h3BCq/2/

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

【讨论】：

为什么我把所有的Script代码都放到HEAD标签中时这段代码不起作用？
在上面的示例中，您没有头部的结束标签。还要确保等到 dom 加载完毕。你可以使用类似 window.onDomReady = function(){Your nifty stuff};最好的做法是你不应该在头部包含 JS，把你的代码放在页面的底部。
我实际上想要一个按钮，当我点击出现提示并要求我输入文字时。该文本显示在画布上。如果我再次单击按钮，则新文本与画布上的旧文本一起添加。
好吧，我将它保存在 window.onDomReady = function() 中，但它仍然无法正常工作link。我是一个初学者所以我知道的不多，虽然我被告知纸条是放在头上的，你为什么说不要放在那里？
jsbin.com/ehugo5/7 还可以查看此链接，将脚本放在底部，developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5