如何使用JavaScript将引导程序图标添加到画布?如果有办法
作者:互联网
到目前为止,这是我尝试过的.
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元素上.
编辑:
如@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 Entity.现在,unicode值将被复制到剪贴板.看起来像这样*.用0替换&#并删除;获取字符代码.
标签:icons,bootstrapping,javascript 来源: https://codeday.me/bug/20191119/2037590.html