Canvas 2 verschiedene Farben, aber eine wird ausgegeben
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktualisiert url
brauch
code
dank
farbe
fehler
hilfestellung
kleine striche
klicken
quellcode
rahmen
rechner
schlaufe
skalierung
tippfehler
url
verschiedene objekte
verschiedenen farben
vorhergehenden zeichnungen
wurf
-
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? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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 -
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 -
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage