我想拖动位于 Canvas 上的文本，我找到了如何拖动矩形的教程，但我无法在文本上实现它，这是移动矩形的以下代码，有人可以帮我实现吗它在文本上？
<!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>
而且，当我在 HEAD 标记中添加此代码时，它也不起作用。为什么会这样？
最佳答案
基本示例 http://jsfiddle.net/h3BCq/1/
美化了一个(保留了rect函数，增加了新的text函数，绘制了文本的边界框) http://jsfiddle.net/h3BCq/2/
我肯定作弊了。我使用 px 作为字体大小，以便更轻松地获取其宽度。您可以使用 em 或点，但您只需要转换为像素即可获得估计宽度。我基本上只是删除了矩形，添加了填充文本，并修改了检查文本宽度的检查。
关于javascript - HTML5 Canvas - 在 Canvas 上拖动文本问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5017619/