如何使用javascript将一个引导图标添加到画布？如果有办法 [英] How do you add a bootstrap icon to an canvas, using javascript? If there is a way

问题描述

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

Here is what I have tried so far.

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

还要;

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

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

推荐答案

您可以使用 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元素。

Here I have used the html2canvas.js to render the html code to a canvas which will dynamically create and return an in memory canvas element (which you can append to some elements if you want). I don't want to use the dynamically created canvas since it will cause some problems when i want to update the canvas content. So I just get the dataurl of the canvas, converted it as an image object and drawn it to my already existing canvas element.

编辑：

如 @Patrick Evans 所述，您可以直接使用 fillText（）方法将gylphicon渲染到画布中。

As @Patrick Evans mentioned, you can directly use fillText() method to render gylphicon into canvas.

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备忘单。单击备忘单上每个图标下方的副本下拉列表，然后单击 Unicode HTML实体。现在unicode值将被复制到剪贴板。它看起来像这样&＃x2a; 。用 0 替换&＃并删除; 以获取char代码。

To get the char code for a icon use gylphicon cheat sheet. Click the copy dropdown below each icon on the cheat sheet and click on Unicode HTML Entity. Now the unicode value will be copied to your clipboard. It will look something like this *. Replace &# with 0 and remove ; to get the char code.

这篇关于如何使用javascript将一个引导图标添加到画布？如果有办法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！