[英]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");
but also; 但是也;
var icon = document.createElement("span");
icon.className ="glyphicon glyphicon-time";
this.appendChild(icon);
You can make use of the html2canvas.js . 您可以使用html2canvas.js 。
The following code may help you: 以下代码可以帮助您:
HTML HTML
<span class="glyphicon glyphicon-align-left"></span>
<canvas id="canvas" width="300" height="300"></canvas>
JS 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';
}
});
Here is the fiddle: http://jsfiddle.net/k7moorthi/qpyj02k8/ 这是小提琴: http : //jsfiddle.net/k7moorthi/qpyj02k8/
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). 在这里,我使用html2canvas.js将html代码渲染到画布,该画布将动态创建并返回内存中的canvas元素(如果需要,可以将其附加到某些元素)。 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.
所以我只获取画布的dataurl,将其转换为图像对象并将其绘制到我现有的canvas元素中。
EDIT: 编辑:
As @Patrick Evans mentioned, you can directly use fillText()
method to render gylphicon into canvas. 正如@Patrick Evans所提到的,您可以直接使用
fillText()
方法将gylphicon渲染到画布中。
HTML HTML
<canvas id="canvas" width="300" height="300"></canvas>
CSS 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 JS
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = '20px glyphicon';
ctx.fillText(String.fromCharCode(0x2a), 10, 50);
Here is the updated fiddle: http://jsfiddle.net/k7moorthi/qpyj02k8/3/ 这是更新的小提琴: http : //jsfiddle.net/k7moorthi/qpyj02k8/3/
To get the char code for a icon use gylphicon cheat sheet . 要获取图标的字符代码,请使用gylphicon备忘单 。 Click the copy dropdown below each icon on the cheat sheet and click on Unicode HTML Entity .
单击备忘单上每个图标下方的副本下拉列表,然后单击Unicode HTML实体 。 Now the unicode value will be copied to your clipboard.
现在unicode值将被复制到剪贴板。 It will look something like this
*
它看起来像这样
*
. 。 Replace
&#
with 0
and remove ;
将
&#
替换为0
并删除;
to get the char code. 获取char代码。
Can't comment as lack of reputation but to answer your question about why you can't draw anything that has an e in the hex code. 不能评论为缺乏声誉,但回答你的问题,为什么你不能在十六进制代码中绘制任何有e的东西。 It's because you need to use the font
这是因为你需要使用这种字体
ctx.font = '12px glyphicons halflings';
rather than just glyphicon. 而不仅仅是glyphicon。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.