Canvas zeichnerrei

    Dachte mal für das thema währe ein neues thema besser .

    bin gerade dabei ein smilie zu bauen https://jsfiddle.net/basti1012/edyzepk6/

    soweit so gut ,aber der smilie soll lachen . über css weiss ich nicht wie man die übliche mundbewegung hinbekommen soll,deswegen dachte ich mit canvas und javascript,

    was ichbis jetzt habe istein mund der auf geht abernicht mehr zu,obwohl die console den code hoch und runter juckelt.

    verstehe sowiso nicht warum der mund immer gröser wird weil bei jeden schleife durchlauf zeichne ich ja nur einen dünnen strich,aber irgendwie löscht der code den vorherigen strich nicht oder so . wie gesagt canvas ist neu land für mich

    hier der mund der lachen sollte

    https://jsfiddle.net/basti1012/bwgscam7/1/

    ist das nur bei canvas so das die grafik nicht gelöscht wird? wenn ich auf der weise ein normalen css würfel verschiebe und den wachsen lasse ist der vorherige würfel ja wieder weg

    Wahrscheinlich meinst Du bei CSS, dass Du etwas animierst. Animieren kannst Du auch mit Canvas, wenn Du eine Bibliothek wie jCanvas verwendest. Dann verhält es sich genau wie bei einer CSS-Animation, dass sich die Form verändert, ohne dass Du die alte löschen musst.

    da habe ich die ganze zeit nach gegoogelt wie man den mund zum animieren kriegt ich habe zwar kreise und text mit jcanvas gefunden aber genau das was du da gemacht hast habe ich nicht gefunden,aber zimlich viele andere sachen die ich nicht brauchte. mal kucken ob ich da jetzt was rausbauen kann was ein lachenden mund am nächsten kommt

    ich habe jetzt mal die ganze nacht getestet und gegoogelt und gemacht .

    habe die ganze zeit versucht den lachenden smilie zu bauen ,also erst den mund.

    ich bin der meinung das das vieleicht mit svg einfacherer währe .also eine elipse nehmen und die auf und zu machen oder svg und canvas zusammen dafür nehmen. ich glaube ich muss mich wohl für ein entscheiden wa? was meinst du ,was währe einfacherer und leichter umzusetzen,wozu würdest du mir raten?

    Für so eine Grafik kannst Du auch SVG sehr gut nehmen. Ich glaube aber kaum, dass das eine oder das andere einfacher ist. SVG hat den Vorteil, dass man es verlustfrei zoomen kann, was bei Canvas nicht der Fall ist.

    Ich muss sagen dein mund trifft genau das was ich mir vorgestellt habe.ich muss auch sagen das ich so ungefähr 70 prozent schon so hatte,ichwahr zumindest schon mal aufd en richtigen weg.. das man svg ohne verlusst anzoomen kann habe ich auch schon gesehen ich dachte immer das liegt an der hohen pixel zahl oder sonst was ,also ist das generell so bei svg? sehe ich das so richtig? auch cool,wann müsste normale fotos als svg umwandeln. nee bin blöd man kann die fehlende qualität der fotos da ja auch nicht rein zaubern. wahr nee schlechte idee.. aber warum hat svg die gute qualität und canvas nicht ? 3ein schwarzer strich bleibt ein schwarzer strich, man sieht den unterschied schön wenn man genau auf der kante zoom . zumindest bei den sachen die ich mir gerade angekuckt hatte

    na gut das mit den animieren habe ich etzt so halbwegs drauf ,zwar noch nicht gut aber ich fummel noch .. viel interesanter währe mal wie man in svg ein z-index zuweisen kann. das währe bi ein smilie ja ratsam. über id und dann csss geht irgendwie nicht . und in den svg code einen zindex wert eingeben finde ich nix drüber.

    EDIT habe das gefunden

    <use xlink:href="#one" />

    und dann nacheinander die id werte eingeben und in der reinfole wird dann erstellt, ist das die einzigste lösung oder geht es einfachere

    DOPPELEDI ich habe den svg element eine id gegeben damit geht es auch ber css. eigentlich ganz simpel,, ich doof

    Einmal editiert, zuletzt von basti1012 (27. Dezember 2017 um 15:11)

    ja wenniger punkte das stimmt wohl aber sonst finde ich den etwas schwerer. ich tue mich ja it normalen canvas und svg schon schwer .aber das ist mir noch etwas kompliziert. mal kucken wie mein smilie wird ,habe zwar schon was gebaut ist aber nicht so schön. ich poste den nachher mal mal kucken ob du da nee idee hast wie man es mit wennig code noch verbessern könnte

    https://jsfiddle.net/basti1012/xuowurje/16/

    das ist der erste smilie wo sich alles bewegt . nachteil alles timeouts. sehr resorcen lastig ,voll der nachteil .

    habe es zwar versucht hiermit zu animieren https://wiki.selfhtml.org/wiki/SVG/SMIL#animate ich habe es aber nicht hinbekommen,es hat sich komischer weise nix bewegt . muss irgendwie den smilie so bauen das er nicht so viel resorcen frist,weil so ist es zuviel. funktioniert zwar gut , ist aber nicht sinn der sache

    Möglichkeiten zur Optimierung:

    • Nur ein Canvas / ein SVG verwenden, Du kannst darin mehrere Objekte zeichnen
    • setInterval statt setTimeout verwenden
    • oder noch besser: requestAnimationFrame verwenden
    • Eine Bibliothek verwenden, die Animationen unterstützt, wie jCanvas für Canvas und svg.js für SVG

    Eine Zeitangabe brauchst Du dabei nicht, weil der Browser festlegt, wann die Funktion aufgerufen wird:

    https://wiki.selfhtml.org/wiki/JavaScrip…tAnimationFrame

    Zitat

    Der Browser sorgt dafür, dass die Funktion nicht öfter aufgerufen wird, als der Bildschirm das Bild neu zeichnen kann (üblicherweise 60 bis 75 Bilder pro Sekunde).

    Die Schnelligkeit stellst Du ein, indem Du die Änderung der Parameter entspr. festlegst.

    Um zu demonstrieren, dass die Verwendung einer Bibliothek Vorteile bringt, habe ich die Haare mal mit einer Schleife zum Mund hinzu gefügt und animiert:

    https://jsfiddle.net/Sempervivum/xuowurje/18/

    Dabei habe ich festgestellt, dass jCanvas doch nicht so das Wahre ist, denn wenn man eine Bezierkurve einmal fest gelegt hat, ist es sehr umständlich, sie zu verändern. Daher bin ich auch von meiner Empfehlung abgewichen, nur ein Canvas zu verwende.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden