js+canvas绘制QQ下拉刷新贝塞尔曲线效果

广告—：工作室

总的来说，实现起来和QQ拨打电话效果没什么区别。效果可以用于移动下拉刷新开发。

实现思想观看stroke()图就明白了。其实就是上方一个大圆，位置始终不变。然后下方一个小圆，跟随着中间的贝塞尔曲线变化进行变换。

但是我这里还是有瑕疵的。因为不知道贝塞尔曲线向下偏移时候的偏移速度。只能用参数进行模拟，所以下面的圆暂时只能用整圆，不能用半圆（最后的是用半圆，交点衔接起来）。不过有兴趣的可以试试进行更改。

首先呢，先上效果图。
分别进行了stroke() 和 fill() 模拟。

!

这里用到的是三次贝塞尔曲线。直接上js代码

var paint,width,height;
var r;//坐标原点位置（r,r/4）
var ar;//圆的半径；
var bsr;//贝塞尔曲线的内偏移量
var count=0,j=0;    //count控制曲线向下变化，j控制下方圆的位置
/*入口*/
function main() {
    var canvas1=document.getElementById("canvas1");
    paint=canvas1.getContext("2d");
    width=paint.canvas.width;
    height=paint.canvas.height;
    r=width/2;
    count=r/4;
    setInterval(start,10);
}

/*进行绘制*/
function start(){
    paint.clearRect(0,0,width,height);
    drawArc();
    drawBsr();
    drawEndArc();
    paint.restore();
}

/*绘制一个圆.left(-ar,0) right(0,-ar) top(0,-r) bottom(0,r)*/
function drawArc(){
    paint.save();
    ar=r/4;
    paint.translate(r,r/4);
    paint.beginPath();
    paint.fillStyle="#ccc";
    paint.arc(0,0,ar,0,2*Math.PI,false);
    paint.fill();
}

/*绘制贝塞尔曲线*/
function drawBsr(){
    /*更改曲线偏移量*/
    count++;
    if(count==(r/4+r)){
        count=ar;
        j=0;
    }
    paint.save();
    bsr=ar-50;
    paint.beginPath();
    paint.fillStyle="#ccc";
    paint.moveTo(-ar,0);
    paint.bezierCurveTo(-bsr,count,bsr,count,ar,0);
    paint.fill();
    paint.restore();
}
/*绘制底部圆*/
function drawEndArc(){
    j=j+0.73;
    paint.beginPath();
    paint.fillStyle="#ccc";
    paint.arc(0,ar/3+j,ar/2,0,2*Math.PI,false);
    paint.fill();
}

代码没有难度。我自己也很衰的没有做好下方的圆的变化。希望有大牛提出解决方法

觉得可以的话，就给个赞赏吧!