在 HTML5 canvas 中为学校项目构建表情符号

Question

我正在尝试为学校项目制作动画表情符号。首先，canvas 甚至从带有黑色轮廓的黄色圆圈开始就给我带来了问题。我什至还没有开始制作脸部或任何动画。我已经在互联网和这个网站上搜索过关于用圆弧构建一个圆的建议，但还没有成功。这是我目前所拥有的：

<!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>

我已经把这段代码加减了行。我改变了顺序，甚至把代码放在程序的不同部分，特别是头部的 canvas 脚本。没有任何效果。我究竟做错了什么？有人对此、表情符号或动画有什么建议吗？

Answer 1

你有两个错别字 - 应该是 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();

Answer 2

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

这对我来说也是一次学习经历，所以我加入了一些东西：

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

在 HTML5 canvas 中为学校项目构建表情符号

Constructing an emoticon in HTML5 canvas for school project

javascript

drawing

html5-canvas