kostenloser Webspace werbefrei: lima-city


Canvas 2 verschiedene Farben, aber eine wird ausgegeben

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Hallo,
    bei mir ists so, ich zeichne 2 verschiedene Objekte mit 2 verschiedenen Farben, das erste in Schwarz, das zweite in rot, aber beide übernehmen das rot, was ja auch eigentlich klar ist. Brauch ich also zwei verschiedene Canvas, oder kann man das anders lösen?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. w*****e

    c143 schrieb:
    Hallo,
    bei mir ists so, ich zeichne 2 verschiedene Objekte mit 2 verschiedenen Farben, das erste in Schwarz, das zweite in rot, aber beide übernehmen das rot, was ja auch eigentlich klar ist. Brauch ich also zwei verschiedene Canvas, oder kann man das anders lösen?


    Guten Tag,

    Grundsätzlich kannst du in einem Canvas durchaus mehrere Farben benutzen.

    Wie wäre es also, wenn du uns ein bisschen an deinem Code teilhaben lässt?

    Grüße webaffe
  4. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Canvas ist 920*520.

    Ich Zeichne einen Rahmen:
    function rahmen(){
    	context.moveTo(20,0);
    	context.lineTo(20,500);
    	context.lineTo(10,510);
    	context.moveTo(20,500);
    	context.lineTo(950,500);
    	context.lineWidth = 2;
            context.stroke(); 
            context.fillText('0',1, 519);
            context.fillText('x',900, 519);
    	context.fillText('y',1, 20);
    	context.strokeStyle = 'black';
    }



    und zeichne eine Fallkurve:

    context.lineTo(currentCoordX * scaleX+20, canvas.height - currentCoordY * scaleY-20);
    		context.strokeStyle = 'red';
    		context.stroke();



    Hier der ganze Code direkt wies funktioniert: https://dl.dropbox.com/u/23477673/Rechner.html






    EDIT: Noch ein anderes kleines Problem, hier ist der Code des Canvas:

    <body onload="rahmen();">
    <div style="text-align: center;">
    <canvas id="Diagramm" height="520" width="920">Ihr Browser unterstützt kein Canvas</canvas><br />
    <button onClick="wurfparabel()">Start</button></div>



    Und hier der Rahmen funktion:
    function rahmen(){
    	context.moveTo(20,0);
    	context.lineTo(20,500);
    	context.lineTo(10,510);
    	context.moveTo(20,500);
    	context.lineTo(920,500);
            context.fillText('0',1, 519);
    	
            //Striche einzeichnen
    	for(var o = 1; i <= (canvas.width-20)/steps; o++) {
    	context.moveTo(o*steps,500);
    	context.lineTo(o*steps,510);
    	}
    	
    	context.lineWidth = 2;
    	context.stroke();
    	context.strokeStyle = 'black';
    }


    (Es sind 100 steps für 900px)

    Mit der forschleife funktioniert das ganze aber nicht mehr, eigentlich sollten doch unten überall kleine Striche entstehen, um genau zu sein 9. Wieso funktioniert das nicht mehr?

    Beitrag zuletzt geändert: 4.1.2013 1:56:46 von c143
  5. Du hast ein javascript Fehler der das ausführen des Codes verhindern
    -->IE Benützer: F12 klicken und Fehler anschauen
    -->Chrome Benutzer: installiere Firebug ctr + shift + j und schaue wo die Fehler sind

    for(var o = 1; i <= (canvas.width-20)/steps; o++) {

    entweder i oder o
    so jedenfalls ist die Schlaufe unendlich bzw =0

    möchtest du vermeiden das die vorhergehenden Zeichnungen mit-eingefärbt werden musst du im zwischendurch mitteilen das nun was neues kommt.
    zBspiel mit:
    context.beginPath();

    Finde es schöner ohne zu skalieren
    hier ein Bspiel im vergleich: http://dregi.lima-city.de/hilfestellungen/wurf.php
    Quellcode findest du mit Rechtsklick in die Seite.

    MFG Dregi

    Beitrag zuletzt geändert: 4.1.2013 5:16:31 von dregi
  6. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Das Problem ist nur, dass ohne Skalierung manche Würfe garnicht angezeigt werden, oder nur ein Teil. Obs jetzt schönes ist oder nicht, sinnvoller ist aufjedenfall die Skalierung.
    Das mit dem o ist ein Tippfehler, danke, aber hat schon mit i nicht funktioniert und funktioniert jetzt immernoch nicht.

    Fehler gefunden. :) Steps war nur in der einen Funktionion definiert, und mit der rechne ich da, jetzt klappts, Beispiel wurde aktualisiert: https://dl.dropbox.com/u/23477673/Rechner.html

    Aber mit den Farben funktionierts jetzt, danke :)

    Beitrag zuletzt geändert: 4.1.2013 15:18:07 von c143
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!