Website - Dreieck zeichnen

  • Also zum Zeichnen von Dreiecken und vielem mehr gibt es JavaScript mit Canvas. Hier mal eine kleines Tutorial: developer.mozilla.org/en/Drawing_Graphics_with_Canvas

    Und das Ändern der Hintergrundfarbe mittels Link geht auch ganz einfach.
    Habs jetzt mal "schmutzig" runtergeschrieben:

    Quellcode

    1. <html>
    2. <head>
    3. <title>Hintergrund ändern</title>
    4. <script type="text/javascript">
    5. function hintergrund() {
    6. document.getElementById("hintergrund").style.backgroundColor = "rgb(128,128,128)";
    7. }
    8. </script>
    9. </head>
    11. <body id="hintergrund">
    12. <a href="#" onclick="hintergrund()">Hintergrund aendern</a>
    13. <body>
    14. </html>
    Alles anzeigen

    Es wird mittels JavaScript auf das Body Element (DOM) zugegriffen und die CSS Eigenschaft backgroundColor mit einem neuen Wert versehen (RGB).
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.

  • Du willst mit JavaScript Dreiecke zeichnen?
    Dann schau dir mal die Vectorgraphik Bibliothek von Walter Zorn an. Die Tools von Walter Zorn sind wirklich nicht zu verachten, reinschauen lohnt sich auf jeden Fall.
    Laut Dokumentation kannst du dann mit der Funktion drawEllipse aus der Klasse "jsGraphics" Kreise/Ellipsen mit JavaScript zeichnen.

    @über mir:
    Anstelle von

    Quellcode

    1. document.getElementById('hintergrund').style.backgroundColor

    kann man mittlerweile auch

    Quellcode

    1. $('hintergrund').style.backgroundColor

    verwenden. Unterschiede gibt es meines Wissens her keine.

  • Hallo, danke für den Tipp mit der Vectorgraphik Bibliothek.
    Deine zweite Aussage muss ich jedoch korrigieren:
    $('hintergrund') ist kein Ersatz für document.getElementById('hintergrund')!

    $ ist der Name einer Funktion die bei den meisten JavaScript Frameworks (Jquery, Prototype, Mootools) mitgeliefert wird.
    Sie ist jedoch nicht in JavaScript enthalten.

    Hier findet man eine gute Implementierung der Funktion: dustindiaz.com/top-ten-javascript/

    Quellcode

    1. function $() {
    2. var elements = new Array();
    3. for (var i = 0; i < arguments.length; i++) {
    4. var element = arguments[i];
    5. if (typeof element == 'string')
    6. element = document.getElementById(element);
    7. if (arguments.length == 1)
    8. return element;
    9. elements.push(element);
    10. }
    11. return elements;
    12. }
    Alles anzeigen


    Noch eine Ergänzung:
    Browser wie Firefox, Safari, Chrome and Opera unterstützen bereits das HTML Canvas Tag. Man kann also direkt in HTML Zeichnen - ohne JavaScript Kenntnisse.
    Weil der Internet Explorer es nicht von Haus aus unterstützt gibt es dafür eine JavaScript Bibliothek names: excanvas (explorercanvas)

    Mehr Informationen zum HTML 5 Canvas: developer.mozilla.org/en/Canvas_tutorial

    Mehr Informationen zur JavaScript Bibliothek für den IE: code.google.com/p/explorercanvas/wiki/Instructions