Как добавить значок начальной загрузки на холст, используя JavaScript? Если есть способ

Вот что я пробовал до сих пор.

     ctx.setAttribute("class", "glyphicon glyphicon-time");

но также;

    var icon = document.createElement("span");

    icon.className ="glyphicon glyphicon-time";
    this.appendChild(icon);
Источник

2 ответа

Решение

Вы можете использовать html2canvas.js.

Следующий код может вам помочь:

HTML

<span class="glyphicon glyphicon-align-left"></span>

<canvas id="canvas" width="300" height="300"></canvas>

JS

html2canvas(document.querySelector('.glyphicon'), {
    onrendered: function(canvas) {
        var myCanvas = document.querySelector('#canvas');
        var ctx = myCanvas.getContext('2d');
        var img = new Image;

        img.onload = function(){
            ctx.drawImage(img,0,0);
        };

        img.src = canvas.toDataURL();

        document.querySelector('.glyphicon').style.display = 'none';
    }
});

Вот скрипка: http://jsfiddle.net/k7moorthi/qpyj02k8/

Здесь я использовал html2canvas.js для рендеринга HTML-кода на холст, который будет динамически создавать и возвращать элемент холста в памяти (который вы можете добавить к некоторым элементам, если хотите). Я не хочу использовать динамически созданный холст, так как это вызовет некоторые проблемы, когда я захочу обновить контент холста. Поэтому я просто получаю dataurl холста, преобразовываю его как объект изображения и рисую в уже существующий элемент canvas.

РЕДАКТИРОВАТЬ:

Как Patrick Evans, вы можете напрямую использовать fillText() метод для визуализации gylphicon на холсте.

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

@font-face {
    font-family: 'glyphicon';
    src: url('glyphicons-halflings-regular.eot'); /* IE9 Compat Modes */
    src: url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('glyphicons-halflings-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('glyphicons-halflings-regular.woff') format('woff'), /* Pretty Modern Browsers */
        url('glyphicons-halflings-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('glyphicons-halflings-regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

JS

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

ctx.font = '20px glyphicon';

ctx.fillText(String.fromCharCode(0x2a), 10, 50);

Вот обновленная скрипка: http://jsfiddle.net/k7moorthi/qpyj02k8/3/

Чтобы получить код символа для иконки, используйте шпаргалку gylphicon. Нажмите раскрывающийся список "Копировать" под каждым значком на шпаргалке и нажмите " Юникод HTML-объект". Теперь значение Unicode будет скопировано в ваш буфер обмена. Это будет выглядеть примерно так &#x2a;, замещать &# с 0 и удалить ; чтобы получить код символа.

Источник

Не могу комментировать как отсутствие репутации, но ответить на ваш вопрос о том, почему вы не можете нарисовать что-то, что есть в шестнадцатеричном коде. Это потому, что вам нужно использовать шрифт

ctx.font = '12px glyphicons halflings';

а не просто глификон.

Источник
Другие вопросы по тегам