Hochwertiger HTML5 und Javascript Code von dem Designbüro Standardabweichung aus München

//Initialisierung context.lineWidth = 1; context.lineJoin = 'miter'; //'bevel' 'round' context.lineCap = 'butt'; //'square' 'round' context.miterLimit = 10; //verhindert einen zu spitzen lineJoin bei der option 'miter' context.strokeStyle = '#FF0000'; //rgb(255,0,0), rgba(255,255,255,0.5), pattern, gradient context.fillStyle = '#FF0000'; //rgb(255,0,0), rgba(255,255,255,0.5), pattern, gradient //HALBKREIS var centerX = 100; var centerY = 100; var radius = 50; var start = 0; //Winkel in Radiant (2 * Math.PI == 360°) var end = 1 * Math.PI; //Winkel in Radiant (2 * Math.PI == 360°) var invertDirection = false; context.beginPath(); //Start context.arc(centerX, centerY, radius, start, end, invertDirection); context.stroke(); //Zeichne Pfad mit den in strokeStyle definierten Eigenschaften //VOLLKREIS centerX = 200; centerY = 200; radius = 50; var start = 0; //Winkel in Radiant (2 * Math.PI == 360°) var end = 2 * Math.PI; //Winkel in Radiant (2 * Math.PI == 360°) var invertDirection = false; context.beginPath(); //Start context.arc(centerX, centerY, radius, start, end, invertDirection); context.stroke(); //Zeichne Pfad mit den in strokeStyle definierten Eigenschaften context.fill(); //Fülle Pfad mit den in fillStyle definierten Eigenschaften //BOGEN context.beginPath(); context.moveTo(100, 100); // Startpunkt moveTo(x1, y1); context.arcTo(200, 100, 200, 200, 100); // Punkt1 und Punkt2 arctTo(x2, y2, x3, y3, radius); context.stroke(); //Zeichne Pfad mit den in strokeStyle definierten Eigenschaften