canvas画笑脸

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

今天用canvas的画圆属性来画一个笑脸

我们利用stroke()来画一个简单的笑脸。

    <canvas id="canvas" width="500" height="500"></canvas>

    let c1=document.getElementById('canvas');
    let ctx=c1.getContext('2d');
    //我们开始画笑脸
    //先画最外面圆脸
     ctx.arc(200,200,50,0,Math.PI*2)
     ctx.stroke();
     
    //左眼睛
    ctx.arc(160,150,15,0，Math.PI*2);
    ctx.stroke();
    
    //右眼睛
    ctx.arc(240,150,15,0,Math.PI*2)
    ctx.stroke();
    
    //嘴我们是向上微笑，我们圆弧只要Math.PI就可以
    ctx.arc(200,230,40,0,Math.PI);
    ctx.stroke();
     

我们看一下效果

圆和圆结束点会和下一个圆连接。这是因为我们绘制的时候，我们的画笔没有把笔抬起来，所以，我们要在绘制下一个圆或者是图形的时候，我们把笔抬起来，然后在新的点绘制图形。

这里我们可以用beginPath和closePath来做，就是下面这样

    let c1=document.getElementById('canvas');
    let ctx=c1.getContext('2d');
    // 整个的大圆
    ctx.beginPath();
    ctx.arc(200,200,100,0,Math.PI*2)
    ctx.stroke()
    ctx.closePath();
// 左眼睛的圆
    ctx.beginPath();
    ctx.arc(160,160,15,0,Math.PI*2)
    ctx.stroke();
    ctx.closePath();
// 右眼睛的圆
    ctx.beginPath();
    ctx.arc(240,160,15,0,Math.PI*2)
    ctx.stroke();
    ctx.closePath();

// 下面的圆弧嘴巴
ctx.beginPath();
ctx.arc(200,230,40,0,Math.PI)
ctx.stroke();
ctx.closePath();

//下面我们用moveTo()来把画笔移动到另外一个点也可以做出同样的效果

      ctx.arc(200,200,100,0,Math.PI*2);
      ctx.moveTo(175,160);

      ctx.arc(160,160,15,0,Math.PI*2);
      ctx.moveTo(255,160);

      ctx.arc(240,160,15,0,Math.PI*2);
      ctx.moveTo(240,230);

      ctx.arc(200,230,40,0,Math.PI);

      ctx.stroke();
      
      这个移动的点是圆开始绘制的那个点，我们这里是顺时针画圆，所以在下一个圆圆心的基础上，我们要加上圆的半径，这样才是我们moveTo移动到的那个点。

以上就是canvas学习的进度二。希望和大家一起进步。