无法在 canvas 上显示项目

Question

我正在尝试在 canvas 上使用 JavaScript。目标是在孔中显示鼠标。我无法让他们展示。我尝试了很多方法。我已经为此工作了将近一个月！在这一点上，我只想让它们在任何浏览器中工作。我知道我缺少将图纸调用 html 的东西。请任何帮助将不胜感激。

我试过 quackit、w3schools、develops.mozilla。唯一显示的是 canvas。我通常用 index.html css 和 js 页面编码，而不是一页上的所有内容。我把 css 页面拿出来帮助调试。

好的，有什么可以帮助的，谢谢

var pic = document.getElementById("myCanvas");
if (pic.getContext) {
  var drawMouse = pic.getContext("2d");

  var drawMouse = function(mouseFaceX, mouseFaceY) {
    //ears
    fill(97, 65, 10);
    ellipse(mouseFaceX + 19, mouseFaceY - 28, 30, 30);
    ellipse(mouseFaceX - 18, mouseFaceY - 28, 30, 30);

    //inner ear
    fill(242, 102, 148);
    ellipse(mouseFaceX + 19, mouseFaceY - 28, 20, 20);
    ellipse(mouseFaceX - 18, mouseFaceY - 28, 20, 20);

    //face
    fill(97, 65, 10);
    ellipse(mouseFaceX, mouseFaceY, 49, 60);

    //eyes
    fill(255, 255, 255);
    ellipse(mouseFaceX + 12, mouseFaceY - 7, 15, 20);
    ellipse(mouseFaceX - 12, mouseFaceY - 7, 15, 20);

    //pupils
    fill(0, 0, 0);
    ellipse(mouseFaceX + 12, mouseFaceY - 7, 10, 10);
    ellipse(mouseFaceX - 12, mouseFaceY - 7, 10, 10);

    //highlights
    fill(255, 255, 255);
    ellipse(mouseFaceX + 14, mouseFaceY - 9, 5, 5);
    ellipse(mouseFaceX - 10, mouseFaceY - 9, 5, 5);

    //nose
    fill(0, 0, 0);
    ellipse(mouseFaceX, mouseFaceY + 29, 18, 13);
  };

  var messagedirX = 15;
  var mouseFaceX = 200;
  var mouseFaceY = 165;
  var bgX = 250;


  var draw = function() {
    bgX -= 1;
    //background (at bottom);
    background(bgX, 250, 170);

    //holes
    fill(71, 68, 71);
    ellipse(200, 200, 90, 25);
    ellipse(310, 286, 90, 25);
    ellipse(317, 128, 90, 25);
    ellipse(87, 102, 90, 25);

    //ears
    fill(97, 65, 10);
    ellipse(mouseFaceX + 19, mouseFaceY - 28, 30, 30);
    ellipse(mouseFaceX - 18, mouseFaceY - 28, 30, 30);

    //inner ear
    fill(242, 102, 148);
    ellipse(mouseFaceX + 19, mouseFaceY - 28, 20, 20);
    ellipse(mouseFaceX - 18, mouseFaceY - 28, 20, 20);

    //face
    fill(97, 65, 10);
    ellipse(mouseFaceX, mouseFaceY, 49, 60);

    //eyes
    fill(255, 255, 255);
    ellipse(mouseFaceX + 12, mouseFaceY - 7, 15, 20);
    ellipse(mouseFaceX - 12, mouseFaceY - 7, 15, 20);

    //pupils
    fill(0, 0, 0);
    ellipse(mouseFaceX + 12, mouseFaceY - 7, 10, 10);
    ellipse(mouseFaceX - 12, mouseFaceY - 7, 10, 10);

    //highlights
    fill(255, 255, 255);
    ellipse(mouseFaceX + 14, mouseFaceY - 9, 5, 5);
    ellipse(mouseFaceX - 10, mouseFaceY - 9, 5, 5);

    //nose
    fill(0, 0, 0);
    ellipse(mouseFaceX, mouseFaceY + 29, 18, 13);


    //message
    messagedirX -= 1;
    textSize(38);
    text("Hello Ralph!!!", messagedirX, 300);

    //all the mice
    drawMouse(87, 70);
    drawMouse(311, 254);
    drawMouse(316, 93);
  };


}

<canvas id="myCanvas" width="1700" height="800" style="border:1px solid #000000;">
</canvas>

Answer 1

你没有做基本的事情，比如让绘图继续进行.. 1. 要绘制任何需要 beginPath() 的内容，请提供信息并关闭它以从其他点重新启动。 2. 我不知道 canvas 上是否有任何 eclipse 方法，因此您必须定义它。在下面的代码中，我有一个如何在 canvas 上绘制椭圆形的示例。

以这个例子为榜样，也许你可以到达你想去的地方。我的建议是从小块开始，然后添加更多。

var pic = document.getElementById("myCanvas");
var drawMouse = pic.getContext("2d");

drawMouse.save();
// translate context
drawMouse.translate(pic.width / 2, pic.height / 2);
// scale context horizontally
drawMouse.scale(2, 1);
drawMouse.beginPath();
drawMouse.arc(0, 0, 30, 0, 2 * Math.PI);
drawMouse.restore();
drawMouse.fillStyle = "#8ED6FF";
drawMouse.fill();
drawMouse.closePath();

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;">
</canvas>

Answer 2

正如@spooky 所提到的，您离题太远了。

查看您提供的代码，我的猜测是您将处理语言与 javascript 混淆了。

要在 canvas 上显示项目，您需要编写 javascript。看看以下提示：

研究 arc() 方法：http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
这是路径的一般教程：http://www.html5canvastutorials.com/tutorials/html5-canvas-paths/

或者，您可以尝试使用 ProcessingJS，它从 Processing 转换为 javascript: http://processingjs.org/articles/jsQuickStart.html 但这可能会让您更加困惑 - 我建议您花一个小时阅读前两个链接，然后构建一些简单的示例，例如@spooky 提供的示例。

无法在 canvas 上显示项目

Cannot get items to display on canvas

html

javascript

canvas