Défi toile HTML5!

Question

q1: est-il possible d'avoir un rectangle invisible?

q2: est-il possible d'appeler méthode sur méthode? Voir ci-dessous.

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

ctx.fillStyle = ""; 
ctx.strokeStyle = ""; 
// as far FF 3.67 goes, no way 
// the goal is to fill the rectangle with some text 
ctx.fillRect(50,50,50,20).fillText("you rock",250,250); 

Merci.

Answer 1

Pourquoi voudriez-vous un rectangle invisible? Je suppose d'utiliser comme limites pour votre appel fillText(). La réponse est non: une fois que vous appelez fillRect() la toile n'a pas la conception d'un rectangle existant à un certain endroit. Pensez à la toile une collection bête de pixels, rien de plus, avec juste quelques méthodes d'aide afin que vous ne deviez pas définir les pixels un à la fois.

Answer 2

q1: est-il possible d'avoir un rectangle invisible?

En effet, c'est!

ctx.fillStyle = 'rgba(255,255,255,0)'; 
ctx.fillRect(50,50,50,20); 

Bien que cela fonctionne aussi, et est un peu plus concis:

; 

---

q2: est-il possible de faire appel à la méthode méthode?

On peut imaginer que vous pourriez faire quelque chose comme ceci:

//Naive generic chainer function 
//returns this even if the default 
//value is significant! 
function chain(obj) { 
function F() {} 
F.prototype = obj; 
var cobj = new F(); 

for (var i in obj) { 
    if (typeof obj[i] == 'function') { 
    //Function Bind-ish 
    cobj[i] = (function() { 
     var method = i; 
     return function() { 
     this.constructor.prototype[method].apply(this, arguments); 
     return this; 
     }; 
    }()); 
    } 
} 
return cobj; 
} 


var chained = chain(ctx); 

chained.fillRect(0,0,200,200) 
.fillRect(100,100,200,200) 
.fillRect(400,400,100,100) 
.fillText("I CAN HAS INVISDIBLE??", 250, 250); 

Mais pourquoi la peine quand vous pouvez le faire:

with (ctx) { 
    fillRect(100,100,200,200); 
    fillRect(300,300,100,100); 
    fillStyle = 'green'; //I CAN SEE 
    fillText("SCREW BEST PRACTICES"); 
} 

Answer 3

Vous semblez essayer d'utiliser l'élément canvas en SVG. Essayez d'utiliser Raphaël à la place. Vos 'objets texte' seront alors réellement des objets et vous pourrez les déplacer en ajustant leurs attributs, vous pouvez aussi définir un groupe et les déplacer tous en une seule opération. Vous pourrez également leur attacher des événements onclick.

Answer 4

vous avez besoin d'une sorte de structure de données pour garder une trace de vos objets de texte à l'intérieur de votre toile. Une fois que vous écrivez sur une toile, vous ne pouvez pas savoir quel objet vous avez dessiné. Vous pouvez obtenir l'information de pixel mais aucun objet. Gardez trace des objets dans un tableau lorsque vous dessinez sur le canevas. Ensuite, écrivez un gestionnaire de souris pour détecter les clics sur le canevas, puis mappez-le à l'aide de la structure de données.

Answer 5

Vous devriez vérifier Canvas.js, il est une petite bibliothèque par Rob Larsen qui permet ctx.chaining, https://github.com/roblarsen/CanvasJS

rectangles invisibles, sont possibles, bien sûr. Je ne vois aucune raison pourquoi pas.

Vous pouvez faire le strokeStyle = quelle que soit la couleur d'arrière-plan du rectangle, 1px.

Il faut quand même être rempli ou caressé, je suis presque sûr. Si vous ne faites pas cela, alors les méthodes que vous utiliserez pour le faire, rect() ou autre, seront dans l'état du contexte, donc à chaque fois que vous remplissez ou coupez, il sera appliqué au rectangle alors. Utilisez .save() et .restore() - aide à séparer l'état de la pile et à indenter votre code.Plus facile à lire et à suivre dans les piles d'état.