Я пытаюсь воссоздать «привязку» Snapchat с холстом HTML5. Часть, которая поставила меня в тупик, — заставить шрифт выглядеть одинаково. Шрифт, который использует Snapchat, похоже, Helvetica, но я не могу заставить свой текст выглядеть так же, как в настоящей привязке.
Вот моя попытка подобрать шрифт. Я нарисовал свой текст поверх фактического снимка экрана, чтобы его было легко сравнить. Вы можете отредактировать переменные JavaScript, чтобы они соответствовали тексту (JSFiddle: http://jsfiddle.net/9RB88/1 /а>).
HTML:
<img src='http://i.imgur.com/tivQ8xJ.jpg'>
<canvas width='640' height='1136'></canvas>
CSS:
img {display:none}
JavaScript:
//--- EDIT THESE ----------------
// text styles...
var fontFamily = 'Helvetica';
var fontSize = '35px';
var fontWeight = 'normal';
// http://css-tricks.com/almanac/properties/f/font-weight/
var onTop = false;
// set this to "true" to place our text on top of the real text (for more precise comparing)
var differentColours = false;
// draw our text/background different colours, making it easier to compare (use when "onTop" is "true")
// tweak where the text is drawn
var horOffset = 2;
var vertOffset = 0;
//-------------------------------
var can = document.getElementsByTagName('canvas')[0];
var c = can.getContext('2d');
c.fillStyle = 'white';
c.fillRect(0, 0, can.width, can.height);
var img = document.getElementsByTagName('img')[0];
c.drawImage(img, 0, 0);
var top;
if(onTop) top = 531;
else top = 450;
if(differentColours) c.fillStyle = 'orange';
else c.fillStyle = 'black';
c.globalAlpha = 0.6;
c.fillRect(0, top, can.width, 74);
c.globalAlpha = 1;
var text = 'Template example thingy $&@?! 123';
if(differentColours) c.fillStyle = 'red';
else c.fillStyle = 'white';
c.textAlign = 'center';
c.font = fontWeight + ' ' + fontSize + ' ' + fontFamily;
c.fillText(text, can.width/2 + horOffset, top + 50 + vertOffset);
JSFiddle: http://jsfiddle.net/9RB88/1/
Кажется, что одна из проблем — это расстояние между буквами, но это невозможно изменить в HTML5 Canvas.
Что я могу сделать?