qq_33655095
2016-09-06 03:27canvas毛边的问题,大神求救!!!
用canvas绘制了圆形动态进度条,但是有毛边,请问怎样处理?
// canvas进度条。 p为当前的时间。s为开始的时间。 百分比=(现在的时间-开始的时间)/14h
function cvs(startTime){
// canvas代码
var c=document.getElementById('cvs');
//获取屏幕的宽度
var clientWidth = document.documentElement.clientWidth;
//根据设计图中的canvas画布的占比进行设置
var canvasWidth = Math.floor(clientWidth*600/1082);
//设置canvas的宽高
c.setAttribute('width',canvasWidth+'px');
c.setAttribute('height',canvasWidth+'px');
var cxt=c.getContext("2d");
//改变画布的原点位置
cxt.translate(canvasWidth / 2,canvasWidth / 2)
//根据屏幕大小求得画布的缩放比例
var scale = canvasWidth / clientWidth;
// console.log(scale);
// 画布的缩放
cxt.scale(scale,scale);
// 圆弧的半径长度
var r = canvasWidth - 45;
// 底层圆弧
cxt.beginPath();
cxt.strokeStyle="#2FD8B1";
cxt.lineWidth = scale * 30;
cxt.lineCap = 'round';
cxt.arc(0,0,r,(-235)*Math.PI/180,55*Math.PI/180,false);
cxt.stroke();
// 清除毛边
cxt.globalCompositeOperation = 'source-atop';
var d = new Date();
var nowTime = d.getTime();
var percent = (nowTime - startTime) / (14 * 60 * 60 * 1000);
alert(startTime);
if(percent === 0){
var percent = nowTime / (14 * 60 * 60 * 1000 + startTime);
};
if(percent < 0){
return;
};
var p = 0;
var timer = setInterval(function () {
p = p + 0.01;
if(p >= percent){
clearInterval(timer);
return;
}
cxt.beginPath();
cxt.strokeStyle="#d2ef62";
cxt.lineWidth = scale * 30;
cxt.lineCap = 'round';
cxt.lineJoin = 'round';
cxt.arc(0,0,r,(-235)*Math.PI/180,(-235+p*290)*Math.PI/180,false);
cxt.stroke();
},50)
}
- 点赞
- 回答
- 收藏
- 复制链接分享
1条回答
为你推荐
- android自定义控件的问题!!!!!
- android
- 0个回答
- JavaScript canvas Math 报错 帮忙看看 感谢!
- javascript
- math
- canvas
- 3个回答
- canvas转成base64 后生成的图片问题 会有叠影重叠的现象。
- base64
- svg
- 图片
- canvas
- 3个回答
- canvas(html5)放大缩小 点击事件
- html5
- canvas
- 1个回答
- 用canvas画地图,批量加载多张瓦片地图,第一次刷新不显示,之后刷新可以,求解!!!
- html5
- javascript
- canvas
- 1个回答
换一换