canvas第二回：曲线之美

世界上只有一种英雄主义

便是注视过生活的真面目后，依然热爱它

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

学习的好处在于，可以让我们少踩坑，这不昨天的问题今天就找到了另一个解决方案：

moveTo(x, y)将笔触移动到指定的坐标x以及y上

实战1

// 画一个笑脸
    function draw2() {
      var canvas=document.getElementById('canvas2');
      if(canvas.getContext) {
        var ctx=canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
        ctx.moveTo(110,75); // 将笔触移动到还制定的坐标上（消除连线啦）
        ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
        ctx.moveTo(65,65);
        ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
        ctx.moveTo(95,65);
        ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
        ctx.stroke();
      }
    }
复制代码

实战2

即使是多年的钢铁直男也有一颗浪漫的心，不多说了化加班为浪漫，直接来个快手小爱心。
早就有所耳闻，得贝塞尔曲线可为所欲为，直接上代码。

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.fillStyle="red";
    ctx.fill();
  }
}
复制代码

参考链接

pomax.github.io/bezierinfo/