2 qq 33655095 qq_33655095 于 2016.09.06 11:27 提问

canvas毛边的问题,大神求救!!!

用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个回答

zhuzige521888
zhuzige521888   2016.09.06 12:01

能把你绘制的代码拿来看看嘛?要不找不到问题

qq_33655095
qq_33655095 已更新问题,请教。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!