<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>
