【canvas画图】画一个摩乐乐

最新推荐文章于 2024-11-11 19:29:13 发布

爱酱丶

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量397

点赞数 1

文章标签： HTML5 Canvas 卡通绘制贝塞尔曲线图形渲染

本文链接：https://blog.csdn.net/M1512415/article/details/118703255

版权

最近摩尔上头，来画个简易版的摩乐乐~
效果图如下：
在这里插入图片描述

<!--
 * @Description: 绘画一个摩乐乐
-->
<!DOCTYPE html>
<html lang="cms-Hans-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>摩乐乐</title>
</head>

<body>
  <canvas id="myCanvas" width="600" height="600"></canvas>
</body>

<script>
  var c = document.getElementById("myCanvas")
  var ctx = c.getContext("2d")

  // 颜色备用
  var whtie = "#ffffff"
  var black = "#000000"
  var red = "red"
  var blue = "#85C6F2"
  var ant = "#FAEBD7"


  // 绘画头
  ctx.beginPath()
  ctx.arc(300, 300, 150, 0, 2 * Math.PI)
  ctx.fillStyle = blue
  ctx.fill()
  ctx.stroke();

  // 左弧线
  ctx.beginPath();
  ctx.moveTo(162, 357); //起始点
  var cp1x = 170, cp1y = 230;  //控制点
  var x = 400, y = 357; // 结束点
  //绘制二次贝塞尔曲线
  ctx.quadraticCurveTo(cp1x, cp1y, x, y);
  ctx.closePath()
  ctx.strokeStyle = ant;
  ctx.fill()
  ctx.stroke();

  // 右弧线
  ctx.moveTo(200, 360); //起始点
  var cp1x = 430, cp1y = 230;  //控制点
  var x = 440, y = 354; // 结束点
  //绘制二次贝塞尔曲线
  ctx.quadraticCurveTo(cp1x, cp1y, x, y);
  ctx.closePath()
  ctx.fillStyle = ant;
  ctx.fill();
  ctx.stroke();

  // 下巴填充
  ctx.beginPath();
  ctx.arc(300, 300, 149, 0.35, 2.75, false);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();

  // 绘画红色圆头鼻子
  ctx.beginPath()
  ctx.arc(300, 300, 40, 0, 2 * Math.PI)
  ctx.strokeStyle = black;
  ctx.fillStyle = red
  ctx.fill()
  ctx.stroke();

  // 绘画鼻子高光白点
  ctx.beginPath()
  ctx.ellipse(280, 280, 10, 6, 2.5, 0, 2 * Math.PI)
  ctx.strokeStyle = red;
  ctx.fillStyle = whtie
  ctx.fill()
  ctx.stroke();

  // 绘画左眼睛
  ctx.beginPath()
  ctx.ellipse(250, 250, 15, 30, 0, 0, Math.PI * 2);
  ctx.strokeStyle = black;
  ctx.fillStyle = black
  ctx.fill();
  ctx.stroke();

  // 绘画左眼睛高光白点
  ctx.beginPath()
  ctx.ellipse(245, 232, 4, 6, 0, 0, 2 * Math.PI)
  ctx.fillStyle = whtie
  ctx.fill()
  ctx.stroke();

  // 绘画右眼睛
  ctx.beginPath()
  ctx.ellipse(350, 250, 15, 30, 0, 0, Math.PI * 2);
  ctx.fillStyle = black
  ctx.fill();
  ctx.stroke();


  // 绘画右眼睛高光白点
  ctx.beginPath()
  ctx.ellipse(346, 232, 4, 6, 0, 0, 2 * Math.PI)
  ctx.fillStyle = whtie
  ctx.fill()
  ctx.stroke();

  // 嘴巴
  ctx.beginPath();
  ctx.arc(320, 350, 40, 0.5, 2, false);
  ctx.stroke();

  ctx.font = "100px sans-serif"
  ctx.strokeText("摩乐乐", 150, 550)
</script>

</html>```