HTML5 Toile - glisser le texte sur la toile Problème

Je veux faire glisser du texte qui se trouve sur la toile, j'ai trouvé un tutoriel Comment faire glisser un rectangle mais je ne pouvais pas l'appliquer sur le texte, Ceci est le code suivant pour déplacer le rectangle , quelqu'un peut-il m'aider à l'implémenter sur Text?HTML5 Toile - glisser le texte sur la toile Problème

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

Et quand j'ajouter ce code dans la balise HEAD ne fonctionne pas. Pourquoi est-ce vrai?

Source

2011-02-16 Yahoo

exemple de base http://jsfiddle.net/h3BCq/1/

enjolivée un (gardé fonction rect, a ajouté une nouvelle fonction de texte, tire la boîte de sélection du texte) http://jsfiddle.net/h3BCq/2/

J'ai vraiment triché. J'ai utilisé px pour la taille de la police pour saisir plus facilement sa largeur. Vous pouvez utiliser em, ou des points bien que vous auriez juste besoin de faire une conversion en pixels pour obtenir une largeur estimée. I Fondamentalement, juste enlevé rect, et ajouté le texte de remplissage, et modifié la vérification pour vérifier la largeur du texte.

Source

2011-02-16 14:43:43 Loktar

Pourquoi ce code ne fonctionne-t-il pas lorsque je mets tout le code Script dans le tag HEAD? – Yahoo

Dans votre exemple ci-dessus, vous n'avez pas de balise de fermeture pour la tête. Assurez-vous également d'attendre que le dom soit chargé. Vous pouvez utiliser quelque chose comme window.onDomReady = function() {Votre truc sympa}; Aussi bonne pratique, vous ne devriez pas inclure JS dans la tête, mettez votre code sur le bas de la page. – Loktar

Je voulais en fait un Butoon, Quand je clique qu'une invite apparaît et me demande du texte. ce texte est affiché sur la toile. si je clique à nouveau sur le bouton, le nouveau texte est ajouté avec l'ancien texte sur la toile. – Yahoo

HTML5 Toile - glisser le texte sur la toile Problème

Répondre

Questions connexes