广告—:工作室
总的来说,实现起来和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();
}
代码没有难度。我自己也很衰的没有做好下方的圆的变化。希望有大牛提出解决方法
觉得可以的话,就给个赞赏吧!