我用html, css, JavaScript 制作了如下图标,如何将这图标转化成图片(JPG或PNG格式)?详情见下:

html-css06

我用html, css, JavaScript 制作了如下图标,如何将这图标转化成图片(JPG或PNG格式)?详情见下:,第1张

你不想用 canvas、svg 和任何图片格式的文件,那你只有将图片转换成 Base64 编码来进行读取。

但是 Base64 的图片不宜超过200k,否则不容易被显示,也不建议这么做,图片是可被缓存的,而网页代码不能,因此也代表着这个代码会随着每次访问都被加载一遍,增加不必要的流量和耗时。

Base64工具网站:网页链接

使用纯css制作扇形图,合并起来形成饼图:

应该知道css3中引入了圆角属性(border-radius),一旦设置这个值,边框即会出现圆角。同样,我们对正方形设置圆角,即可得到饼状图

html:<div id="circle">11</div>

css:

#circle{

width:0

height:0

border-radius:100px

border-width:100px

border-style:solid

border-color: red blue green yellow

line-height:99em

overflow:hidden

cursor:pointer

margin: 30px auto

}

效果:

4.同样我们对其中三个边框设置透明色即可得到扇形

html:<div id="fan">11</div>

css:

#fan{

width:0

height:0

border-radius:100px

border-width:100px

border-style:solid

border-color:red transparent transparent transparent

line-height:99em

overflow:hidden

cursor:pointer

margin: 30px auto

}

效果: