taralino

Maus-Aktivitäten

Unter Verwendung einer Canvas-Zeichenfläche können Funktionen in Abhängigkeit von Maus-Aktivitäten aufgerufen werden. Welche Möglichkeiten zur Verfügung stehen, demonstrieren die nachfolgenden Beispiele.

Eine ausführliche Dokumentation findest du in der Konzept-Referenz:

Zur Referenz

Beispiel

Klicke auf die Zeichenfläche.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,10], [0,6], {width:480, background:"lightgrey"});
Canvas.text(5, 3, "Click on me!");

function on_mouse_down(x, y) {
  Canvas.circle(x, y, 0.2, {fill:"blue"});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Bewege die Maus auf die Zeichenfläche.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,10], [0,6], {width:480, background:"lightgrey"});
Canvas.text(5, 3, "Move on me!");

function on_mouse_enter() {
  Canvas.rect(5, 3, 10, 6, {fill:"blue"});
};

function on_mouse_leave() {
  Canvas.rect(5, 3, 10, 6, {fill:"red"});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Klicke auf die Zeichenfläche und bewege die Maus (mit gedrückter Maustaste).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

var mousekey = "up";

Canvas.init([0,10], [0,6], {width:480, background:"lightgrey"});
Canvas.text(5, 3, "Click and move on me!");

function on_mouse_down(x, y) {
  mousekey = "down";
};

function on_mouse_up(x, y) {
  mousekey = "up";
};

function on_mouse_move(x, y) {
  var c = time() % 1;
  if (mousekey == "down") Canvas.circle(x, y, 0.2, {fill:c});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern