一、看之前建议先了解基本的canvas使用方法。
canvas教程
只需要花几分钟了解下就好,有助于更快学会。当然不了解也能看,我注释写的非常清晰,大可放心。
下面是效果图:
圆圈是根据设定的时间来画完的。
二、html部分
<div class="wrapper">
<!-- canvas的宽高最好用width和height写在内联样式里(规范写法) -->
<canvas id="drawCircle" width="400px" height="400px">111111</canvas>
</div>
三、css部分
.wrapper {
margin: 10px auto;
width: 400px;
height: 400px;
border: 1px solid pink;
}
四、js部分
//数据对象,个人喜欢把数据放在一起
var data = {
paintIntv: null, //初始化画圆的定时器
time: 8, //设置动画持续时间为8s
percent: 0,
refreshTime: 200, //刷新时间间隔
};
data.paintIntv = setInterval(dealTime, data.refreshTime); //开启定时器,200ms刷新一次
/*
*这个函数用来处理百分比和时间的关系
*percent:每次应该加的百分比(由时间的长短决定)
*time 决定了整个动画过程的持续时间
*/
function dealTime() {
paint(data.percent); //根据百分比画圆
if (data.percent >= 1) {
clearInterval(data.paintIntv); //画完后清除定时器
} else {
//percent 最大为1,用1.0c成乘以refreshTime是转化为浮点数
//除以总时间表示,一毫秒走多少,再乘以刷新时间就是刷新一次应该走的距离
data.percent += (data.refreshTime * 1.0) / (data.time * 1000);
}
}
/*
*把画圆环的方法封装成函数
*methodName : paint
*percent : 画圆环的百分比
*/
function paint(percent) {
var draw = document.getElementById("drawCircle"); //拿到画布dom
/*
*检测浏览器是否支持canvas
* else里面放浏览器支持的显示用于提示
*/
if (draw.getContext) {
var ctx = draw.getContext("2d"); //创建画布对象
ctx.beginPath(); //表示按照指定的路径开始绘制图形
/*
*parameter1:圆心x坐标,必须
*parameter2:圆心y坐标,必须
*parameter3:画圆的起始点0(3点钟方向),必须
*parameter4:画圆的结束点(按照百分比来),必须
*parameter5:是否逆时针画(可省略,默认顺时针)
*/
ctx.arc(200, 200, 50, 0, 2 * Math.PI * percent, false);
ctx.lineWidth = 5; //线条宽度
ctx.strokeStyle = "skyblue"; //线条颜色
ctx.stroke(); //画线条
ctx.closePath(); //表示路径结束,这个图形绘制完毕,之后可以在这个画布中画别的图形
} else {
alert("你的浏览器不支持canvas"); //其实绝大部分浏览器都支持canvas,这里的判断可以不写
}
}