HTML5性特性——Canvas——案例：绘制笑脸

原创

于 2019-09-04 19:44:08 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5

这篇博客介绍如何使用HTML5的Canvas元素实现一个有趣的动画效果，即创建一个笑脸，通过JavaScript实现1秒内笑脸从张嘴到闭嘴的切换。内容包括HTML页面布局、CSS样式设置以及关键的JS文件中Canvas绘图逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：

创建张嘴笑脸再绘制闭嘴笑脸1秒切换一张

1.HTML页面

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

2.CSS样式

body{text-align: center;}
canvas{background:rgb(243, 245, 240);}

3.JS文件

//1:获取画布元素与画笔对象
var c3 = document.getElementById("c3");
var ctx = c3.getContext("2d");
// 功能一:创建一个函数完成闭嘴笑脸
function closeSmile(){
  // 2.1:绘制最外层的轮廓圆脸
  ctx.beginPath();
  ctx.strokeStyle="rgb(118, 156, 206)";
  ctx.lineWidth=4;
  ctx.arc(250,200,45,0,2*Math.PI);
  ctx.lineTo(250,200);
  ctx.stroke();
  // 2.2:绘制眼球(实心颜色)
  ctx.beginPath();
  ctx.arc(265,180,7,0,2*Math.PI);
  ctx.fillStyle="rgb(118, 156, 206)";
  ctx.fill();
  // 2.3:绘制眼神(实心白色)
  ctx.beginPath();
  ctx.arc(265,180,1.5,0,2*Math.PI);
  ctx.fillStyle="#fff";
  ctx.fill();
}

// 功能二:创建一个函数完成张嘴笑