Peter: stroke() und hover

Grüß Gott,

wenn ich eine Linie zeichne (s. Beispiel), gibt es eine Möglichkeit, diese Linie mit einem Hover-Befehl zu belegen? Dass sie z.B. ihre Farbe ändert oder ähnliches?

Danke für jede Antwort!
Peter

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();

</script>

</body>
</html>

  1. Schonmal :hover probiert?

  2. Om nah hoo pez nyeetz, Peter!

    wenn ich eine Linie zeichne (s. Beispiel), gibt es eine Möglichkeit, diese Linie mit einem Hover-Befehl zu belegen? Dass sie z.B. ihre Farbe ändert oder ähnliches?

    Danke für jede Antwort!

    Auch wenn sie besserwisserisch rüberkommt?

    Es gibt keinen hover-Befehl. Es gibt eine hover-Pseudoklasse.

    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    Verwechsle nicht Tag und Element.

    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);

    Du kannst natürlich mit JavaScript das Innenleben des Canvas verändern, bei komplexen Geschichten, dauert das natürlich ggf. eine Weile, weil das mMn. nur durch ein komplettes Neu-Zeichnen zu erledigen ist.

    Wenn du sagst, was dein eigentliches Ziel ist, lässt sich vielleicht auf canvas verzichten.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pin und Pinneberg.

    1. Hallo,

      Du kannst natürlich mit JavaScript das Innenleben des Canvas verändern, bei komplexen Geschichten, dauert das natürlich ggf. eine Weile, weil das mMn. nur durch ein komplettes Neu-Zeichnen zu erledigen ist.

      oder zwei vorbereitete canvas-Elemente wechselweise ein- und ausblenden? Keine Ahnung, ob sich das canvas-Element in der Hinsicht wie alle anderen HTML-Elemente verhält, aber ich setze es einfach mal voraus.

      Just my 2 cents ...
       Martin

      --
      Wer keiner Fliege etwas zuleide tut, darf sich nicht über die Maden im Fleisch wundern.
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  3. Hallo,

    wenn ich eine Linie zeichne (s. Beispiel), gibt es eine Möglichkeit, diese Linie mit einem Hover-Befehl zu belegen?

    Canvas ist pixelbasiert. Du füllst mit den Zeichenoperationen Pixel auf der Zeichenfläche, mehr nicht. Das, was du zeichnest, sind keine bleibenden Objekte, die Zeigereignisse entgegennehmen können und ihren Status ändern können. Derzeit lässt sich nicht definieren, dass etwas Gezeichnetes auf dem Canvas auf Zeigereignisse reagiert. Wenn sich etwas auf dem Canvas ändern soll, musst du meist den ganzen Canvas neu zeichnen.

    Mithilfe von Canvas-Bibliotheken kann man sich ein Objekt-Modell als Abstraktion bauen, welches jedes Zeigereignis auf ein eigenes Objekt umrechnet und dort Handler aufruft. Das ist möglich, aber ein bisschen Arbeit. Es ist für die Zukunft geplant, dass man sensitive Flächen auf dem Canvas definieren kann – das ist aber vom Zeichnen strikt getrennt.

    Falls du manipulierbare Objekte brauchst, die auf einfache Weise Ereignisse empfangen, so empfehle ich dir, dich mit der Sprache SVG beschäftigen:
    http://www.selfsvg.info/
    http://svg.tutorial.aptico.de/

    BonsaiJS und RaphaelJS sind JavaScript-Bibliothek, mit denen sich SVG programmatisch erzeugen.

    Grüße,
    Mathias

    1. BonsaiJS und RaphaelJS sind JavaScript-Bibliothek, mit denen sich SVG programmatisch erzeugen.

      RaphaelJS ist schon ziemlich veraltet, hat dafür aber einen VML-Fallback für Internet Explorer < 9, welche kein SVG unterstützen.

      Snap.svg ist der Nachfolger von RaphaelJS.

      Mathias