在HTML5画布中为学校项目构建一个表情符号

Constructing an emoticon in HTML5 canvas for school project

本文关键字：一个 符号 HTML5 布中 为学校 构建 项目      更新时间：2023-11-26

我正试图为一个学校项目构建一个动画表情符号。首先也是最重要的一点，画布给了我问题，甚至从一个黑色轮廓的黄色圆圈开始。我甚至还没有从人脸或任何动画开始。我在互联网和这个网站上搜索了关于用弧线构建圆圈的建议，但尚未成功。以下是我目前所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
</head>
<body>
  <canvas width="1200" height="900" id="myCanvas">
      Your browser does not support canvas.
  </canvas>
  <script>
        var myCanvas = document.getElementById("myCanvas");
        var ctx = myCanvas.getContext("2d");
        ctx.beginpath(); 
        ctx.strokeStyle = "000000";
        ctx.fillstyle = "FFFF00";
        ctx.lineWidth = 5;
        ctx.arc(600, 450, 300, 0, Math.Pi * 2, true);
        ctx.closePath();
        ctx.fill();
  </script>
</body>
</html>

我已经取了这个代码，并添加和减去了行。我改变了顺序，甚至把代码放在程序的不同部分，特别是在头部的画布脚本中。什么都没用。我做错了什么？有人对此、表情符号或动画有什么建议吗？

要添加到NOBrien的答案中，还需要设置fillStyle，而不是fillstyle。

这对我来说也是一次学习经历，所以我有点投入了很多东西：

https://jsfiddle.net/gregborbonus/o67bdr0m/

您有两个拼写错误-应该是ctx.beginPath（）（大写p）和Math.PI（大写I）:

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.beginPath(); 
ctx.strokeStyle = "000000";
ctx.fillStyle = "FFFF00";
ctx.lineWidth = 5;
ctx.arc(600, 450, 300, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
相关文章：