Canvas贝塞尔曲线

为什么80%的码农都做不了架构师？>>>   

在canvas中有一个非常有用的路劲类型： 贝塞尔曲线。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y结束点。

quadraticCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线，cp1x,cp1y控制点一，cp2x,cp2y为控制点二，x,y为结束点。

图中分别描述了二次贝塞尔曲线和三次贝塞尔曲线的实例，红色点表示控制点，蓝色点表示结束点，二次贝塞尔曲线有一个控制点和一个结束点，三次贝塞尔曲线有两个控制点和一个结束点。

下面画个对话框（二次贝赛尔曲线）

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,65,100);
    ctx.quadraticCurveTo(125,100,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();
  }
}

效果图：

再来个稍微复杂点的（三次贝赛尔曲线）

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
  }
}

效果图：

感觉这东西就是计算的时候比较费劲，但确实能画出很多复杂的东西，一点一点调整。

转载于:https://my.oschina.net/pandon/blog/1036413