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 已更新问题,请教。
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点,这样即便设置了lineWidth为1也将看到两个象素效果的线条,解决方法原象素点+0.5进行偏移。 下面是处理前后的效果比较:
去除canvas 画圆的毛边
还是上上篇博客遗留下来的问题,http://blog.csdn.net/yeshennet/article/details/50531007 产品经理坐在我身后,一直在念叨,怎么有毛边怎么有毛边,视觉的妹子也坐不住了,修修修...... 其实我在浏览器上看到也有点模糊,怎么办呢,后来我找到了这个东西:http://jondavidjohn.github.io/hidpi-canvas-poly
canvas去毛边
1、画线时将坐标取整后加上0.5。原因是canvas在绘制的时候,整数点坐标在屏幕像素的中间点,绘制的时候,线条会俩边都占一半,在视觉上看起来是俩个像素的效果。(写基础方法的时候做下处理)2、设置canvas的宽高后,绘制完图形后再scale缩小。...
Android canvas clipPath 问题
最近发现 一个奇怪的问题,canvas clipRect切图片使用很方便,但是我用到clipPath 切一个圆形的时候,出现奇怪的问题,在有的手机是可以的,但是有的手机切图不成功。网上也没看相关的资料,求大神们帮忙看看,下面是代码: Path path = new Path(); path.addCircle(getWidth() >> 1, getHeight() >> 1,tmep.getW
微博数据库作业
数据库 微博作业 qq962064545大神求救
canvas画有白色的线条
.bj{width: 100%;height: 100%;background-color: red;position: relative;z-index: 1;}           #canvas{position: absolute;z-index: 2;}                                                       
html5 canvas的clearRect
clearRect() 方法删除一个画布的矩形区域。 前阵做钟表demo的时候 setInterval 里clearRect 火狐下没有任何问题 但ie,谷歌下出现了问题 因为之前设置 translate了与rotate  但是clearRect的时候这些会影响他的位置已至于没有“擦除画布”,后来"擦除"的时候把translate还原 得以解决,最后发现一个牛逼的方法 canvas.width
Canvas抗锯齿方法两种
转:抗锯齿方法两种(其一:paint.setAntiAlias(ture);paint.setBitmapFilter(true)) 在Android中,目前,我知道有两种出现锯齿的情况。  ①当我们用Canvas绘制位图的时候,如果对位图进行了选择,则位图会出现锯齿。  ②在用View的RotateAnimation做动画时候,如果V
为什么canvas绘制的线条会模糊、有锯齿?
有如下的代码:<style type="text/css"> canvas { position:absolute; height : 100%; width : 100%; } </style> <canvas id="canvas" width="100%" height="100%"> </canvas> <script type
Android:的Bitmap进行ClipPath存在锯齿
一般去除锯齿有2中方法 1、mPaint.setAntiAlias(true); 2canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.FILTER_BITMAP_FLAG|Paint.ANTI_ALIAS_FLAG)); 但是 如StackOverflow的问题:http://stackoverflow.com/q