用canvas画一个实心描边的笑脸

最新推荐文章于 2023-09-23 09:36:09 发布

dream0726

最新推荐文章于 2023-09-23 09:36:09 发布

阅读量2k

点赞数 3

分类专栏： html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/dream0726/article/details/76145998

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用canvas画一个实心描边的笑脸

最近学习了HTML5，看完了教程不知道该干嘛，网上看到别人用canvas画笑脸，不过是空心的，我想画一个实心的带描边的，网上找了一些教程，看着太繁琐。于是取其精华，几经失败终于成功了。未免以后忘记，所以特意记录下来，以备日后复习。
效果如下：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>实心圆测试</title>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="myCanvas" width="400" height="400" style="background-color: #fafafa;"></canvas>

  <script type="text/javascript">

    var c=document.getElementById('myCanvas');
    var ctx=c.getContext("2d");

    ctx.beginPath();
    ctx.arc(200,200,100,0,2*Math.PI);
    ctx.fillStyle="red";
    ctx.fill();
    ctx.strokeStyle="black";
    ctx.lineWidth=4;
    ctx.stroke();
    ctx.closePath();  //这里一定要关闭路径，否则眼睛的圆没法设定样式。
//以上画了一个红色实心的且描了黑色边的圆

    ctx.beginPath();
    ctx.arc(170,170,14,0,2*Math.PI);
    ctx.fillStyle="black";
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();
    ctx.arc(230,170,14,0,2*Math.PI);
    ctx.fillStyle="black";
    ctx.fill();
    ctx.closePath();
//以上代码画了两只眼睛。

    ctx.beginPath();
    ctx.arc(200,200,60,0,1*Math.PI);
//  ctx.arc(200,200,60,0,Math.PI)上面一行这么写也行，1*可以省略不要。
//  ctx.strokeStyle="white";
//  ctx.lineWidth=8;  大白嘴巴，就是为了看看效果
    ctx.stroke();

  </script>
</body>
</html>