[FRAGE] Problem mit <style type='text/css'>canvas.....

[brutzler]

Hallo,
will mich mal ganz kurz vorstellen:
Bin 50, E-Ingenieur und mache gerade erste Gehversuche mit Javascript auf HTML.
Für ein Projekt habe ich mir ein Rechteck mit Farbverlauf aus Codeschnipseln aus dem Internet gebaut. Das will ich auif einer kleinen Webseite darstellen.
Sieht momentan so aus:

    <script type='text/javascript'>
      function drawGradient(){ 
      var objCanvas = document.getElementById('Grafik_1') 
      var objContext = objCanvas.getContext('2d') 
      var objGradient = objContext.createLinearGradient(0, 280, 0, 00) 
      objGradient.addColorStop(1, 'rgb(0,0,0)')
      objGradient.addColorStop(0.8, 'rgb(255,255,255)') 
      objGradient.addColorStop(0.6, 'rgb(0,0,255)')
      objGradient.addColorStop(0.4, 'rgb(0,255,0)') 
      objGradient.addColorStop(0.2, 'rgb(255,0,0)') 
      objGradient.addColorStop(0, 'rgb(0,0,0)') 
      objContext.fillStyle = objGradient 
      objContext.fillRect(0, 0, 150, 300) 
	  } 
      window.onload = function(){drawGradient();} 
    </script>

Um die Ecken abzurunden habe ich noch Folgendes eingefügt: (es gibt ja wohl kein fillRoundRect??)

    <style type='text/css'>canvas{border: 5px solid #000; -moz-border-radius: 30px; border-radius: 30px; -webkit-border-radius: 30px;}</style>

So weit klappt das schon prima.
Aber wenn ich jetzt noch ein zweites Canvas-Element per Script definiere, dann wird das auch mit den abgerundeten Ecken dargestellt.
Anscheinend ist das "<style type...." für die ganze Seite gültig.
Kann ich das auch nur für ein Canvas-Element spezifizieren? Also so klappts nicht: "<style type='text/css'>canvas.Grafik_1...." :icon6:
Oder gibts ne Möglichkeit beim Zeichnen des Elements gleich die runden Ecken zu bekommen?

Ach ja: noch ne Frage:
Ist das notwendig?

      window.onload = function(){drawGradient();

Die Grafik wird auch aufgebaut, wenn ich es weglasse.

Danke schon mal vorab für jede Antwort und Hilfe.
/brutzler

 

[tsseh]

Um die Ecken abzurunden habe ich noch Folgendes eingefügt: (es gibt ja wohl kein fillRoundRect??)

<canvas> - Rechtecke mit runden Ecken

    <style type='text/css'>[B]canvas[/B]{border: 5px solid #000; -moz-border-radius: 30px; border-radius: 30px; -webkit-border-radius: 30px;}</style>

So weit klappt das schon prima.
Aber wenn ich jetzt noch ein zweites Canvas-Element per Script definiere, dann wird das auch mit den abgerundeten Ecken dargestellt.
Anscheinend ist das "<style type...." für die ganze Seite gültig.
Kann ich das auch nur für ein Canvas-Element spezifizieren?

du machst das für alle canvas elemente. das fette ist ein selektor über id's, classen, die position kannst du die elemente angeben, die du willst, z.b. https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type

Ist das notwendig?

      window.onload = function(){drawGradient();

du musst ja die funktion drawGradient() irgendwo aufrufen. das passier hier im onload(https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener ist vorzuziehen, da man mehrere events einfach registrieren kann, onload wartet auch bis alles geladen ist, alle bilder, ... https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded ist meist ausreichend, dann ist der dom-tree vollständig und bilder und ähnliches könmnen noch laden)
jedenfalls, wenn dein grafik auch so aufgebaut wird, rufst du die funktion noch an anderer stelle auf

 

[brutzler]

@tsseh:

Danke für deine Antworten:

1.) Das mit den abgerundeten Ecken hatte ich auch schon gefunden. Aber das ist mir zu viel zusätzlicher Code. Soll ja nur ne Webseite für den µ-Controller sein
2.) selektor:
Nette Seite. Hab ich gleich in meine Sammlung aufgenommen.
Ich hätte das jetzt so verstanden, dass man nicht über eine ganze Klasse selektiert, sondern auch für einzelne IDs selektieren kann?
Eine Änderung meines Codes brachte aber nicht den Erfolg:

<style type='text/css'>#Grafik_1{border: 5px solid #000; -moz-border-radius: 30px; border-radius: 30px; -webkit-border-radius: 30px;}</style>

Bin ich auf der richtigen Spur, oder voll am Holzweg?
3.) onload:
Sorry, ich Esel hab folgendes übersehen

 <body onload='drawGradient()'>

 

[tsseh]

Eine Änderung meines Codes brachte aber nicht den Erfolg:

hat dein element denn diese id?

 

[brutzler]

Hmmmm irgendwie hab ich es jetzt doch hingekriegt. (Mit dem Code von oben)

Danke!

 

[kkapsner]

hat dein element denn diese id?

Laut JS anscheinend schon... also müsste der CSS-Selektor eigentlich passen.

@brutzler: zeig' doch mal das HTML in einer lauffähigen Version oder einen Testlink, wo wir uns das live ansehen können. Darüber ist es meist einfacher Fehler zu finden.