Canvas-Fläche, Ecken abrunden

GN911

Erfahrenes Mitglied
Hallo,

kann man von der Canvas-Fläche die Ecken 3px abrunden?
Code:
	var canvas = document.querySelector("section canvas"), width = canvas.width, height = canvas.height;
	if (canvas && canvas.getContext("2d"))
	{
		var ctx = canvas.getContext("2d");
		
		var grd = ctx.createLinearGradient(0, 0, 0, canvas.height);
		grd.addColorStop(0, "hsla(204, 100%, 27%, 1)");
		grd.addColorStop(0.4, "hsla(204, 79%, 45%, 1)");
		grd.addColorStop(1, "hsla(204, 87%, 62%, 1)");
		
		ctx.fillStyle = grd;
		ctx.fillRect(0, 0, width, height);
	}
Gruß GN911
 
Hi,

ich habe auch schon mal Rechtecke mit abgerundeten Ecken für das Canvas-Element benötigt und mir einige kleine Routinen geschrieben, um das zu realisieren. Das Ergebnis habe ich mal dokumentiert und auf canvas.quaese.de hochgeladen.

Ciao
Quaese
 
hallo,

na ich will kein objekt im canvas mit runden ecken zeichnen, sondern die "canvas-fläche" soll die runden ecken bekommen...
 
dann halt einfach mit CSS
-moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px
 
hatte ich schon versucht, ****t aber auch nicht....
Code:
canvas { -moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px ; }
 
Habe es gerade schnell getestet und funktioniert problemlos bei mir. (Firefox 4, Chrome 10, Opera, IE9).
Code:
<canvas style="border:1px solid black;-moz-border-radius: 15px; border-radius: 15px; -webkit-border-radius: 15px ;"></canvas>
 
Hi,

die runden Ecken sind nicht mehr sichtbar, wenn du ein Rechteck mit dem Ursprung als Startkoordinaten und Breite und Länge des canvas-Elements als Dimensionen zeichnest. Du muss also ein Rechteck mit abgerundeten Ecken in den Kontext einfügen.

Beispiel mit der vorgestellten Klasse von canvas.quaese.de:
Code:
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
div canvas{
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -khtml-border-radius: 15px;
  border: 0px solid #000;
}
 //-->
</style>
<script type="text/javascript">
qpCanvas = function(oOpts){
  // Default-Optionen
  var opts = {};

  // Default-Optionen erweitern
  for(var key in oOpts){
    opts[key] = oOpts[key];
  }


// Private

  /*
   * Funktion zum Initialisieren des Canvas- und Context-Objekts
   */
  function init(){
    opts.canvas = document.getElementById(opts.id);

    if(!opts.canvas){
      //alert("Kein gültige ID");
      return false;
    };

    if(typeof opts.canvas.done == "undefined"){
      var intWidth = (window.getComputedStyle)? window.getComputedStyle(opts.canvas, null)['width']
	                                            : ((opts.canvas.currentStyle)? opts.canvas.currentStyle['width'] : 300);

      var intHeight = (window.getComputedStyle)? window.getComputedStyle(opts.canvas, null)['height']
	                                             : ((opts.canvas.currentStyle)? opts.canvas.currentStyle['height'] : 300);

      opts.canvas.style.width = parseInt(intWidth) + "px";
      opts.canvas.style.height = parseInt(intHeight) + "px";
      opts.canvas.width = parseInt(intWidth);
      opts.canvas.height = parseInt(intHeight);

      opts.canvas.done = 1;
    }

    if(opts.canvas.getContext){
      opts.ctx = opts.canvas.getContext("2d");
    }
  }


  /*
   * Die Funktion zeichnet ein Rechteck mit abgerundeten Ecken
   * Das Rechteck wird ausgehend von den Koordinaten x und y mit der Breite w und der Höhe h gezeichnet.
   * Zudem kann das Element um den Winkel phi um die Startkoordinaten (x, y) gedreht werden.
   *
   * Parameter:
   * x    - (integer) horizontale Startkoordinate (x-Koordinate der linken oberen Ecke des Rechtecks)
   * y    - (integer) vertikale Startkoordinate (y-Koordinate der linken oberen Ecke des Rechtecks)
   * w    - (integer) Breite des Rechtecks
   * h    - (integer) Höhe des Rechtecks
   * type - (string)  Style des Rechtecks
   *                  'fill'  : (default) Rechteck wird gefüllt gezeichnet,
   *                  'stroke': Umrisslinie wird gezeichnet
   * more - (object)  mit den Komponenten:
   *                  - phi  - (float) Drehwinkel um die Startkoordinaten (x, y) (Default: 0)
   *                  - r    - (integer) Radius der abgerundeten Ecken (Default: 0)
   */
  function RoundRect(x, y, w, h, type, more){
    more.phi  = (typeof more.phi == "undefined")? 0 : more.phi;
    more.r    = (typeof more.r == "undefined")? 0 : more.r;

    type = (typeof type == "undefined")? "fill" : type;

    // Startwinkel im Bogenmass
    var rad = Math.PI*more.phi/180;
    // Hilfsvariable
    var varLen;
    // Type-Objekt
    var oFn = {
      'fill': function(){opts.ctx.fill()},
      'stroke': function(){opts.ctx.stroke()}
    };
    type = (typeof oFn[type] != "function")? "fill" : type;

    opts.ctx.save();
    // Context zum Startpunkt verschieben
    opts.ctx.translate(x, y);
    // Rechtseck um Startwinkel drehen
    opts.ctx.rotate(rad);
    // Neuen Pfad beginnen
    opts.ctx.beginPath();
    // An Startkoordinaten bewegen
    opts.ctx.moveTo(more.r, 0);

    for(var i=0; i<4; i++){
      varLen = (i%2 == 0)? w : h;
      // Linie zeichnen
      opts.ctx.lineTo(varLen-more.r, 0);
      // Oberen rechten Kreisbogen zeichnen
      opts.ctx.quadraticCurveTo(varLen, 0, varLen, more.r);
      // Mittelpunkt an Linienende verschieben
      opts.ctx.translate(varLen, 0);
      // Context um 90° drehen
      opts.ctx.rotate(Math.PI/2);
    }

    opts.ctx.closePath();
    oFn[type]();
    opts.ctx.restore();
  }


// Public

  /*
   * Die Funktion zeichnet ein gefülltes Rechteck mit abgerundeten Ecken
   *
   * Parameter:
   * x    - (integer) horizontale Startkoordinate (x-Koordinate der linken oberen Ecke des Rechtecks)
   * y    - (integer) vertikale Startkoordinate (y-Koordinate der linken oberen Ecke des Rechtecks)
   * w    - (integer) Breite des Rechtecks
   * h    - (integer) Höhe des Rechtecks
   * more - (object)  mit den Komponenten:
   *                  - phi  - (float) Drehwinkel um die Startkoordinaten (x, y) (Default: 0)
   *                  - r    - (integer) Radius der abgerundeten Ecken (Default: 0)
   */
  opts.fillRoundRect = function(x, y, w, h, more){
    RoundRect(x, y, w, h, 'fill', more);

    return opts;
  }

  /*
   * Die Funktion zeichnet die Umrisslinie eines Rechtecks mit abgerundeten Ecken
   *
   * Parameter:
   * x    - (integer) horizontale Startkoordinate (x-Koordinate der linken oberen Ecke des Rechtecks)
   * y    - (integer) vertikale Startkoordinate (y-Koordinate der linken oberen Ecke des Rechtecks)
   * w    - (integer) Breite des Rechtecks
   * h    - (integer) Höhe des Rechtecks
   * more - (object)  mit den Komponenten:
   *                  - phi  - (float) Drehwinkel um die Startkoordinaten (x, y) (Default: 0)
   *                  - r    - (integer) Radius der abgerundeten Ecken (Default: 0)
   */
  opts.strokeRoundRect = function(x, y, w, h, more){
    RoundRect(x, y, w, h, 'stroke', more);

    return opts;
  }

  /*
   * Funktion zum Festlegen der Füllfarbe
   *
   * Parameter:
   * strCol - (string/object) Gültiger CSS-String zum Festlegen eines Farbwertes oder ein gültiges fill-Objekt (z.B. Gradient)
   */
  opts.fillStyle = function(strCol){
    opts.ctx.fillStyle = strCol;
    return opts;
  }

  /*
   * Funktion zum Festlegen der Linienfarbe
   *
   * Parameter:
   * strCol - (string) Gültiger CSS-String zum Festlegen eines Farbwertes
   */
  opts.strokeStyle = function(strCol){
    opts.ctx.strokeStyle = strCol;
    return opts;
  }

  /*
   * Funktion zum Festlegen der Linienstärke
   *
   * Parameter:
   * floatWidth - (float) Float-Wert mit der Linienstärke
   */
  opts.lineWidth = function(floatWidth){
    opts.ctx.lineWidth = floatWidth;
    return opts;
  }

  // Objekt initialisieren
  init();

  return opts;
}

window.onload = function(){
  var canvas = document.querySelector("div canvas"), width = canvas.width, height = canvas.height;
  if(canvas && canvas.getContext("2d")){
    var ctx = canvas.getContext("2d");

    var grd = ctx.createLinearGradient(0, 0, 0, canvas.height);
    grd.addColorStop(0, "hsla(204, 100%, 27%, 1)");
    grd.addColorStop(0.4, "hsla(204, 79%, 45%, 1)");
    grd.addColorStop(1, "hsla(204, 87%, 62%, 1)");

    // Gradient als Füllstil zuweisen und Rechteck mit abgerundeten Ecken zeichnen
    qpCanvas({id: 'canvas_id'}).fillStyle(grd).fillRoundRect(0, 0, width, height, {r: 15});
  }
}
</script>
</head>
<body>
<div><canvas id="canvas_id" width="400" height="300"></canvas></div>
</body>
</html>
Ciao
Quaese
 
Zurück