Проблема с холстом HTML5!

Question

q1: Возможно ли иметь невидимый прямоугольник?

q2: Можно ли назвать метод по методу? Смотри ниже.

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); 

Спасибо.

Answer 1

Зачем вам нужен невидимый прямоугольник? Я предполагаю использовать в качестве границ для вашего звонка fillText(). Ответ отрицательный: после того, как вы вызываете fillRect(), у холста нет концепции прямоугольника, существующего в определенном месте. Подумайте о том, что холст представляет собой туманную коллекцию пикселей, не более того, с помощью только некоторых вспомогательных методов, поэтому вам не нужно устанавливать пиксели по одному.

Answer 2

q1: возможно ли иметь невидимый прямоугольник?

Действительно, это так!

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

Хотя это работает, и это немного более кратким:

; 

---

q2: можно вызвать метод по методу?

Предположительно вы могли бы сделать что-то вроде этого:

//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); 

Но зачем, когда вы можете сделать это:

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

Answer 3

Вы, кажется, пытается использовать холст элемент как SVG. Вместо этого попробуйте использовать Raphaël. Ваши «текстовые объекты» фактически будут объектами, и вы можете перемещать их, настраивая их атрибуты, вы также можете определить группу и переместить их все за одну операцию. Вы также сможете приложить к ним onclick событий.

Answer 4

вам нужна структура данных, чтобы отслеживать ваши текстовые объекты внутри вашего холста. Когда вы пишете на холсте, вы не можете узнать, какой объект вы нарисовали. Вы можете получить информацию о пикселях, но не объект. Поэтому следите за объектами в массиве, когда вы рисуете на холсте. А затем напишите обработчик мыши, чтобы обнаружить клики на холсте, а затем отобразить его обратно с использованием структуры данных.

Answer 5

Вы должны проверить Canvas.js, это небольшая библиотека Роб Larsen, что позволяет ctx.chaining, https://github.com/roblarsen/CanvasJS

Невидимые прямоугольники, возможно, конечно. Я не вижу причин, почему нет.

Вы можете сделать strokeStyle = независимо от того, какой цвет фона имеет прямоугольник, 1px.

Это требует заполнения или глажения, хотя, я уверен. Если вы этого не сделаете, то методы, которые вы используете для его создания, rect() или что-то еще, будут находиться в состоянии контекста, поэтому всякий раз, когда вы заполняете или инсульт, он будет применяться к прямоугольнику.

Использование .save() и .restore() - помогает разделить состояние стека и отступы также и вашего кода.Легче читать и следить за штатными стеками.