思路
使用2个canvas 一个是背景圆环，一个是彩色圆环。
使用setInterval 让彩色圆环逐步绘制。
第一步先写结构
一个盒子包裹2个canvas以及文字盒子；
盒子使用相对定位作为父级，flex布局，设置居中；
一个canvas，使用绝对定位作为背景，canvas-id=”canvasProgressbg”
另一个canvas，使用相对定位作为进度条，canvas-id=”canvasProgress”
mysql 已设置utf8mb4 还是存不了表情【解决方法】
1，emoji介绍
（1）emoji 就是表情符号，来自日语词汇“絵文字”（假名为“えもじ”，读音即 emoji）。
（2）最早由栗田穰崇（Shigetaka Kurita）创作，并在日本网络及手机用户中流行。 自苹果公司发布的 iOS 5 输入法中加入了 emoji 后，这种表情符号开始席卷全球。
（3）目前 emoji 已被大多数现代计算机系统所兼容的 Unicode 编码采纳，普遍应用于各种手机短信和社交网络中。
1535075603-7981-201610
2，问题描述
最近使用 MySQL 作为一个移动应用的数据库。但是不管使用 Anroid 设备，还是 iOS 设备。只要插入包含有 emoji 表情符号的记录时就报错。
1535075604-3223-201610
3，问题原因
MySQL 我使用的是默认的 utf8 编码，UTF8 编码只支持 1-3 个字节。而 emoji 占有 4 个字节的存储空间，所以自然保存不了。
从 MYSQL5.5 开始，可支持 4 个字节 UTF 编码，只要将编码标记成 utf8mb4 即可。并且 utf8mb4 是兼容 utf8 的。
csv文件上传中文编码乱码的解决方法
下面是上传文件的截图：
1.文件是以GB2312作为编号，当上传至服务端后，编码依然是GB2312。所以一开始我尝试以GB2312编码进行转码，但是结果是失败的。
2.后来想到了写出文件的时候进行转码，成功把文件转成了UTF-8，但是会出现其他的bug，比如数字“1”会变成“1 ”。也就是多了很多空格，所以也失败了。
3.最后想到了，分割字符串，组装成对象那块，开始依然尝试使用GB2312、GBK、UTF-8依然失败，最后使用编码：ISO-8859-1 成功了。
下面是代码片段：
@Override
public Object readLineMap(String line) throws IllegalServiceException {
if (line.contains(",")) {
String xline = null;
try {
xline = new String(line.getBytes("ISO-8859-1"));
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
logger(xline);
String[] strings = xline.split(",");
...........................
Linux系统可能需要这样子：
xline = new String(line.getBytes("ISO-8859-1"),"GB2312");
SVG 图像入门教程
一、概述
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
1533731400-5552-ctS55l0tjplHBGG4qmOVTBf19PQw
SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。
使用CSS3跟SVG实现圆圈进度条
我也是因为业务需要，需要给头像做一个进度条，查看效果图：
实现的代码也是网上搜索的，这里我讲解一下实现的原理：
使用svg画一个圆，然后分成5段，每段的颜色值可以渐变，当然也可以纯色，我是使用了纯色的。
下面来看一下CSS代码：
<style>
body {
background-color: #fff
}
@-webkit-keyframes load {
0% {
stroke-dashoffset: 0;
}
}
@keyframes load {
0% {
stroke-dashoffset: 0;
}
}
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
.progress > li {
display: inline-block;
position: relative;
text-align: center;
color: #93A2AC;
font-family: Lato;
font-weight: 100;
margin: 2rem;
}
.progress > li:before {
content: attr(data-name);
position: absolute;
width: 100%;
bottom: -2rem;
font-weight: 400;
}
.progress > li:after {
content: attr(data-percent);
position: absolute;
width: 100%;
top: 3.7rem;
left: 0;
font-size: 2rem;
text-align: center;
}
.progress svg {
width: 10rem;
height: 10rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 25;
stroke-dasharray: 629;
stroke: #fff;
opacity: .9;
-webkit-animation: load 10s;
animation: load 10s;
}
</style>
可以之间是10秒，如果喜欢短一点的，可以改一下样式“progress svg:nth-child(2) path”中的10s;
现在来看看html代码：
<ul class="progress">
<!-- Item -->
<li data-name="HTML5 Skill" data-percent="87%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="2" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
stroke-dashoffset="547"></path>
</svg>
</li>
<!-- Item -->
<li data-name="jQuery Skill" data-percent="65%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="12" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
stroke-dashoffset="200"></path>
</svg>
</li>
</ul>
其中data-name属性是标题名称，data-percent是中间的进度描述，我自己项目整理的时候把这段的CSS代码过滤了，因为我不需要显示这些，进度的控制是在svg中path元素的stroke-dashoffset属性中：
100%=629，也就是1%=6.29，自己根据进度乘一下。另外需要说一下的就是g元素中的stroke-width属性是控制宽度的。
颜色是在另外一个avg中控制的，可以看到path路径有一个stroke=”url(#cl6)”属性，这个就是控制段的颜色，下面附上代码：
<svg width="0" height="0">
<defs>
<lineargradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
</defs>
</svg>
下面来看看效果图:
下面奉上全部源代码：
<ul class="progress">
<!-- Item -->
<li data-name="HTML5 Skill" data-percent="87%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="2" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
stroke-dashoffset="547"></path>
</svg>
</li>
<!-- Item -->
<li data-name="jQuery Skill" data-percent="65%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="12" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z"
stroke-dashoffset="200"></path>
</svg>
</li>
</ul>
<!-- Defining Angle Gradient Colors -->
<svg width="0" height="0">
<defs>
<lineargradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
<lineargradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
<stop stop-color="#08DA24"></stop>
<stop offset="100%" stop-color="#08DA24"></stop>
</lineargradient>
</defs>
</svg>
<style>
body {
background-color: #fff
}
@-webkit-keyframes load {
0% {
stroke-dashoffset: 0;
}
}
@keyframes load {
0% {
stroke-dashoffset: 0;
}
}
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
.progress > li {
display: inline-block;
position: relative;
text-align: center;
color: #93A2AC;
font-family: Lato;
font-weight: 100;
margin: 2rem;
}
.progress > li:before {
content: attr(data-name);
position: absolute;
width: 100%;
bottom: -2rem;
font-weight: 400;
}
.progress > li:after {
content: attr(data-percent);
position: absolute;
width: 100%;
top: 3.7rem;
left: 0;
font-size: 2rem;
text-align: center;
}
.progress svg {
width: 10rem;
height: 10rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 25;
stroke-dasharray: 629;
stroke: #fff;
opacity: .9;
-webkit-animation: load 10s;
animation: load 10s;
}
</style>
拷贝一下，就可以运行了。
近期评论