無法獲得項目以在畫布上顯示

Question

我正在嘗試在畫布上使用JavaScript。目標是讓鼠標在孔中顯示。我無法讓他們展示。我嘗試了很多方法。我已經爲此工作了近一個月了！在這一點上，我只想讓他們在任何瀏覽器中工作。我知道我錯過了將圖畫稱爲html的東西。請任何幫助，將不勝感激。

我試過quackit，w3schools，develops.mozilla。唯一顯示的是畫布。我通常使用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.我不知道是否有任何Eclipse上的日食方法，所以你將不得不定義。在下面的代碼中，我有一個如何在畫布上繪製橢圓形的例子。

從這個例子中領先，也許你可以到達你想去的地方。我的建議是從小塊開始，然後再添加更多。

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混淆了。

要讓項目在畫布上顯示，您需要編寫javascript。 看看下面的提示：

1. 研究弧（）方法：http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
2. 這裏是爲路徑的通用教程：http://www.html5canvastutorials.com/tutorials/html5-canvas-paths/

或者，你可以嘗試使用ProcessingJS，這從處理轉換爲javascript：http://processingjs.org/articles/jsQuickStart.html，但這可能會讓您更加困惑 - 我會建議花費一個小時閱讀前兩個鏈接，然後構建一些簡單的示例，如提供的一個@spooky。