Question

我正在尝试为学校项目构建一个动画表情符号。首先，画布给我带来的问题甚至是从带有黑色轮廓的黄色圆圈开始。我还没有从脸部或任何动画开始。我已经搜索了互联网以及这个网站，以获得建立弧形圆圈的建议，但尚未成功。以下是我到目前为止的情况：

<!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的答案，您还需要设置str，而不是填充样式。

这对我来说也是一种学习经历，所以我把它扔进了一堆东西：

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

在学校项目的HTML5画布中构建表情符号

2 个答案: