Erstellen eines Emoticons in HTML5-Canvas für das Schulprojekt

Ich versuche ein animiertes Emoticon für ein Schulprojekt zu erstellen. In erster Linie gibt mir die Leinwand Probleme, die mit einem gelben Kreis mit schwarzem Umriss beginnen. Ich muss noch mit dem Gesicht oder irgendeiner Animation anfangen. Ich habe sowohl im Internet als auch auf dieser Seite nach Tipps gesucht, um einen Kreis mit dem Bogen zu konstruieren und muss noch erfolgreich sein. Hier ist, was ich bisher:Erstellen eines Emoticons in HTML5-Canvas für das Schulprojekt

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

Ich habe diesen Code genommen und addiert und subtrahiert Linien. Ich habe die Reihenfolge geändert und sogar den Code in verschiedene Teile des Programms eingefügt, speziell in das Canvas-Skript im Kopf. Nichts hat funktioniert. Was mache ich falsch? Hat jemand Vorschläge dafür, das Emoticon oder die Animation?

Quelle

2016-04-04 phoenixCoder

'Math.PI' nicht' Math.Pi' –

Stellen Sie sicher, dass Sie die Entwickler-Tools des ausgewählten Browsers verwenden, um die Konsole bei der Arbeit an Projekten auf Fehler zu überprüfen. Daher wird folgende Meldung angezeigt: "Uncaught TypeError: ctx.beginpath ist keine Funktion" –

Das ist ein guter Rat, danke. Ich war mir nicht bewusst, dass es Math.PI – phoenixCoder

Hinzufügen zu NOBrien Antwort, können Sie auch festlegen möchten die fillStyle nicht fillstyle.

Das war ein bisschen eine Lernerfahrung für mich als gut, so warf ich irgendwie in einem Haufen Zeug, um es:

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

Quelle

2016-04-04 02:51:58

Ahh, guter Fang! – NOBrien

Was ist der beste Weg, um dieses Bild zu animieren, es zum zwinkern zu lassen? Nutze die Rahmenanimation? – phoenixCoder

Yup, ich habe gerade mit dem gespielt, den ich gemacht habe: https://jsfiddle.net/o67bdr0m/1/ –

Sie haben zwei Fehler - Es sollte ctx.beginPath() (Kapital P) und Math.PI (Kapital I) sein:

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();

Quelle

2016-04-04 02:36:18 NOBrien

Vielen Dank war, dass gearbeitet hat. Das andere Problem, mit dem ich immer noch konfrontiert bin, ist, dass der Füllstil die Standardeinstellung oder schwarz ist, während ich die Füllung als gelb markiert habe. Ich habe bemerkt, dass die Syntax fillStyle anstelle von fillstyle sein sollte, aber das behebt das Problem nicht. – phoenixCoder

Erstellen eines Emoticons in HTML5-Canvas für das Schulprojekt

Antwort

Verwandte Themen