Нарисуйте текст поверх прямоугольника - PullRequest
Новая
       6

Нарисуйте текст поверх прямоугольника

4 голосов
/ 07 апреля 2011

Я пытаюсь нарисовать текст в углу прямоугольника, но я только начал рисовать текст на прямоугольнике, прежде чем заняться позиционированием. Я не могу нарисовать прямоугольник, залить его цветом, а затем нарисовать текст поверх него. Даже если я сначала нарисую текст, затем прямоугольник, а затем заполню эти порядки, кажется, что прямоугольник перекрывает текст.

Этот код будет отображать текст и прямоугольники без заливки 

context.beginPath();

for (var i = 0; i < 8; i++) {
    context.font = "18pt Arial";
    context.fillText("blah", 0, 0 + (i * 50));
    context.rect(30, 0 + (i * 50), 50, 50);
}

context.lineWidth = 0.1;
context.strokeStyle = "black";
context.stroke();

Этот код покажет мне текст и заполненные прямоугольниками, но текст, кажется, появляется ниже прямоугольников. 

context.beginPath();

for (var i = 0; i < 8; i++) {
   context.font = "18pt Arial";
   context.fillText("blah", 0, 0 + (i * 50));
   context.rect(30, 0 + (i * 50), 50, 50);
}

context.fillStyle = "#33cc00";
context.fill();
context.lineWidth = 0.1;
context.strokeStyle = "black";
context.stroke();

Есть идеи, что я делаю не так?

1 Ответ

9 голосов
/ 07 апреля 2011

Каждая операция рисования на холсте HTML5 рисует поверх и (вообще) стирает все, что было под ним. Если вы хотите, чтобы текст рисовался поверх прямоугольников, вы должны позвонить fillText() после и набрать fill() для созданных вами ректов.

Неважно, в каком порядке команды рисования добавляются к контуру, именно когда происходит fill(), определяется, когда применяются чернила мгновенного высыхания. Поскольку вы делаете это после всех ваших вызовов fillText(), прямоугольники рисуются сверху.

Я бы изменил ваш код следующим образом: 

context.font = "18pt Arial";
context.strokeStyle = "#000";
context.lineWidth = 0.1;
for (var i=0; i<8; i++) {
   context.fillStyle = "#3c0";
   context.fillRect(30, 0 + (i * 50), 50, 50);
   context.strokeRect(30, 0 + (i * 50), 50, 50);
   context.fillStyle = "#fff";
   context.fillText("blah", 0, 0 + (i * 50));
}

В качестве альтернативы, если вы не хотите использовать fillRect()/strokeRect(): 

context.font = "18pt Arial";
context.strokeStyle = "#000";
context.lineWidth = 0.1;
for (var i=0; i<8; i++) {
   context.beginPath();
   context.fillStyle = "#3c0";
   context.rect(30, 0 + (i * 50), 50, 50);
   context.fill();
   context.stroke();

   context.fillStyle = "#fff";
   context.fillText("blah", 0, 0 + (i * 50));
}
...