Änderung von context.fillRect durch onclick nicht möglich?

[noobidea]

Hallo Leute!

Ich beschäftige mich neuerdings mit Canvas. Wollte mir ein einfaches Zeichentool aus verfügbarem Code zusammenbauen, dies scheitert allerdings an der Änderung von context.fillRect. Mein Versuch war es die Pinselstärke context.fillRect durch eine Variable und das onclick-Vorgehen zu ändern. Allerdings funktioniert es nicht. Ich habe alles mögliche ausprobiert ohne Erfolg... Code siehe unten:
Vielen Dank schonmal für eure Tipps!

Gruß Fabian!

<script type="text/javascript">
       // Die Canvas-Funktion beim Laden der Seite aufrufen
       if(window.addEventListener){
           addEventListener("load", drawCanvas, false);
       }
       // Das Canvas-Element
       function drawCanvas(){
           var kx = document.getElementById('kx');
           var ky = document.getElementById('ky');
           var canvas = document.getElementById('testcanvas1');
           if(canvas.getContext){
               var context = canvas.getContext('2d');
           }
           // Cursorposition
           var x, y;
           canvas.onmousemove = function(e){
               x = e.clientX-canvas.offsetLeft;
               y = e.clientY-canvas.offsetTop;
               kx.innerHTML = x;
               ky.innerHTML = y;
               paint();
               
           }
           // paint!
           
           var active = false;
           canvas.onmousedown = function(){ active = true; }
           canvas.onmouseup = function(){ active = false; }
           
           function paint(){
               if(active) { context.fillRect(x, y, 5, 5); }
                       
               }
           // paint!
           // get the colour
           
           var blue = document.getElementById('blau');
           blue.onclick = function(){ context.fillStyle = "rgb(0, 0, 255)"; }
           var black = document.getElementById('schwarz');
           black.onclick = function(){ context.fillStyle = "rgb(0, 0, 0)"; }
           var white = document.getElementById('weiss');
           white.onclick = function(){ context.fillStyle = "rgb(255, 255, 255)"; }
           var big = document.getElementById('gross');
           big.onclick = function(){context.fillRect(x, y, 10, 10);}
           
           // default
           context.fillStyle = "black";
           
       }
   </script>

 

[Sempervivum]

An so etwas ähnlichem arbeite ich auch gerade:
http://ulrichbangert.de/div/webprogrammierung/javascript/jc.html

Mein Versuch war es die Pinselstärke context.fillRect durch eine Variable und das onclick-Vorgehen zu ändern.

In dem Code kann ich das nicht finden, nur das Ändern der Farbe.
Die Strichstärke müsstest Du mit strokeWidth ändern können.

 

[SpiceLab]

Mein Versuch war es die Pinselstärke context.fillRect durch eine Variable und das onclick-Vorgehen zu ändern. Allerdings funktioniert es nicht.

Auch wenn es sich dort nicht speziell um .fillRect() dreht, vielleicht sind vom Grundsatz her diese beiden stackoverflow-Postings mit ihren anhänglichen JSFiddle-Demos eine Hilfe:

How do I add a simple onClick event handler to a canvas element?
Demo -> http://jsfiddle.net/BmeKr/

Add onclick and onmouseover to canvas element
Demo -> http://jsfiddle.net/m1erickson/sAFku/

 

[noobidea]

Onclick funktioniert wenn ich die farbe ändern will, nur eben nicht beim context.fillRect...

 

[Sempervivum]

context.fillRect() ist eine Funktion. Wenn Du die Füllfarbe ändern willst, musst Du fillStyle setzen, so wie hier:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_fillrect

 

[SpiceLab]

Wollte mir ein einfaches Zeichentool aus verfügbarem Code zusammenbauen, dies scheitert allerdings an der Änderung von context.fillRect.

Quelle des gezeigten Scripts: http://www.peterkroener.de/eine-kleine-canvas-einfuehrung/ -> Beispiel 3: http://www.peterkroener.de/test/canvas/paint.html

Dieser Zweizeiler

var big = document.getElementById('gross');
big.onclick = function(){context.fillRect(x, y, 10, 10);}

den Du dem Script hinzugefügt hast, reicht nicht aus, um die Dimension zu ändern.

http://jsfiddle.net/T2zsM/1/ demonstriert (auf anderem Wege), dass grundsätzlich nachträglich per Klick (auf ein Element, Button, ...) die Dimensionierung von fillRect() manipuliert werden kann.

Ansonsten kann ich Dir nur empfehlen, @Sempervivum's (ausgereifteres) Demo unter die Lupe zu nehmen, wie darin Linien gezeichnet werden, und die Strichstärke (strokeWidth) wählbar ist - Tipp: nicht über fillRect()

An so etwas ähnlichem arbeite ich auch gerade:
http://ulrichbangert.de/div/webprogrammierung/javascript/jc.html

[edit]Tipp-Ex[/edit]​

 

[noobidea]

Hallo Leute Vielen Dank an euch und euer Feedback! An @Sempervivum ein großes Lob! Das sieht schon ziemlich schick aus. Ich glaub mein Problem war einfach das, dass ich mich zu sehr auf fillRect versteift hab. Werde versuchen die Tage mal die aufgeführten Alternativen z.B. über strokeWitdh zu lösen. Danke auch an @SpiceLab für die Unterstützung. Werde euch auf dem Laufenden halten wie die Idee gereift ist.

 

[noobidea]

Ist mir durchgerutscht, der link zum ursrpünglichen skript ist wie von SpiceLab bereits richtig zitiert unter:

http://www.peterkroener.de/eine-kleine-canvas-einfuehrung/ -> Beispiel 3: http://www.peterkroener.de/test/canvas/paint.html

 

[Sempervivum]

Danke für das Lob von beiden Seiten für mein Skript. Dass ich es in relativ kurzer Zeit aufbauen konnte, liegt daran, dass ich die Bibliothek jCanvas verwendet habe. Diese erleichtert das Arbeiten mit Canvas ungemein und bietet zusätzliche Möglichkeiten, z. B. durch die Möglichkeit, Layer und Animationen zu verwenden. Wenn Du, noobidea, dich intensiver mit Canvas beschäftigen möchtest, kann ich dir nur wärmstens empfehlen, es auch einmal damit zu versuchen.

 

[noobidea]

Danke Sempervivum noch für den Tipp, werde mich da mal noch etwas umsehen. Bin noch recht unerfahren was das Gebiet betrifft... :-( ich finds interessant was man alles an Funktionen einbauen und nutzen kann, das macht spaß mal etwas zu tüfteln.

Hinweis noch zu meinem 1. Beitrag: ursprüngliches Skript war auf dem Weblog von Peter Kroener, CC-BY-SA-Lizenz
Hoffentlich hab ich jetzt alles richtig zitiert.