'一键下班' or '水滴下拉刷新'？

发表于

##参考文章

##思路

####静态实现

image
按照参考文章1中所述， 准备使用canvas实现。
画两个圆加上两条贝塞尔曲线，来实现图中效果。

#####两个圆形

canvas画圆形:

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
  1. x: 圆的中心的 x 坐标。
  2. y: 圆的中心的 y 坐标。
  3. r: 圆的半径。
  4. sAngle:起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
  5. eAngle:结束角，以弧度计。

  6. counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

    image

#####弧线

画贝塞尔曲线：

context.quadraticCurveTo(cpx,cpy,x,y);

其实就三个主要要素：

  1. 开始点
  2. 控制点
  3. 结束点

#####坑

遇到的最大的坑没想到居然是如何填充画完之后的图。
最后的解决办法，一定要保证起始点和结束点重合，这样，
closepath之后，在fill()就能出现我想要的！

#####代码和效果

function draw(){
  var canvas=document.getElementById('canvas');
  var context=canvas.getContext('2d');
  context.fillStyle="#FF0000";
  context.strokeStyle = "red";
  //开始画图
  context.beginPath();

  //画第一条曲线
  context.moveTo(40,40);
  context.quadraticCurveTo(60,60,50,80);

  //底下的半圆
  context.arc(60,80,10, Math.PI, 0,true);

  //第二条曲线
  context.moveTo(70,80);
  context.quadraticCurveTo(60,60,80,40);
  //上圆
  context.arc(60,40,20, 0,Math.PI, true); //Math.PI*2是JS计算方法，是圆

  //填充
  context.closePath();
  context.stroke();
  context.fill();
}

image
image

####Please 动起来！！
今天有点晚，明天再搞！！！