Question

这是我到目前为止所尝试的内容。

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

但也;

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

    icon.className ="glyphicon glyphicon-time";
    this.appendChild(icon);

Answer 1

您可以使用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代码渲染到画布，该画布将动态创建并返回内存中的canvas元素（如果需要，可以将其附加到某些元素）。我不想使用动态创建的画布，因为当我想更新画布内容时它会导致一些问题。所以我只获取画布的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 cheat sheet。单击备忘单上每个图标下方的副本下拉列表，然后单击 Unicode HTML实体。现在unicode值将被复制到剪贴板。它看起来像这个*。将&#替换为0并删除;以获取字符代码。

Answer 2

无法评论是否缺乏声誉，而是回答您的问题，为什么您无法在十六进制代码中绘制任何具有e的内容。这是因为你需要使用字体

ctx.font = '12px glyphicons halflings';

而不仅仅是glyphicon。

如何使用javascript向画布添加引导图标？如果有办法

2 个答案: