HTML5 холст text-shadow эквивалент?

Я пытаюсь создать тот же эффект, который я могу создать в текстовой тени css, с холстом HTML5.HTML5 холст text-shadow эквивалент?

я могу сделать это с помощью CSS:

font: 36px Impact; 
text-shadow: 2px 2px 2px #000, 
      -2px -2px 2px #000, 
      2px -2px 2px #000, 
      -2px 2px 2px #000, 
      2px -2px 2px #000, 
      2px 2px 2px #000, 
      -2px -2px 0 #000, 
      2px -2px 0 #000, 
      -2px 2px 0 #000, 
      2px -2px 0 #000;

который создает символы, которые выглядят следующим образом:

Но холст HTML5, в ходе слишком тонкий, и тень дон «Позвольте мне указать более одного, в отличие от текстовой тени.

Кто-нибудь понял, как это осуществить?

источник

2014-01-03 Troy Payne

Что вы хотите прочитать в коде на холсте? –

Пожалуйста, поделитесь с нами кодом, который вы использовали до сих пор, чтобы мы могли рассмотреть проблему. – K3N

Вы сказали, что удар слишком тонкий, вы пытались увеличить свойство lineWidth контекста? Я думаю, что значение 4 с тенью будет подходящим значением для соответствия вашему изображению.

Чтобы нарисовать несколько теней в холсте HTML5, вы можете рисовать элемент несколько раз в одном месте с другой тенью каждый раз.

источник

2014-01-03 17:51:19

, поэтому я установил свой lineWidth в 4, и это довольно близко, но я не знаю, какую тень дать. Вот мой код: \t \t context.fillStyle = 'white'; \t \t context.strokeStyle = 'черный'; \t \t context.lineWidth = 4; \t \t var fontSize = (canvas.height/8); \t \t context.font = fontSize + 'px Impact'; \t \t context.textAlign = 'center'; –

Команда HTML холст, чтобы применить тени к тексту (или любой другой рисунок) является context.shadowBlur

enter image description here

Вот отправной точкой в направлении вашего затененной текстового эффекта:

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

ctx.font="75px verdana"; 
ctx.shadowColor="black"; 
ctx.shadowBlur=7; 
ctx.lineWidth=5; 
ctx.strokeText("HELLO",25,100); 
ctx.shadowBlur=0; 
ctx.fillStyle="white"; 
ctx.fillText("HELLO",25,100);

источник

2014-01-03 21:44:37 markE

HTML5 холст text-shadow эквивалент?

ответ

Смежные вопросы