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

HTML5 Canvas - Context 2D - Draw Text (Javascript) / Designbüro München

Das HTML5 und Javascript Bild von Standardabweichung aus München

Draw Text

Zeichnen von Schrift auf dem HTML5 Canvas Element.

//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 var text = 'HTML5 Canvas fillText'; var textWidth = undefined; var textHeight = 10; context.textAlign = 'start'; // 'left', 'right', 'end', 'center' context.textBaseline = 'top'; // 'hanging', 'bottom', 'alphabetic', 'middle' context.font = textHeight + 'px sans-serif'; //font = ' ' // normal, italic, oblique (interpoliert) // normal, small-caps (interpoliert) // normal, bold, bolder, lighter (interpoliert) // z.B. 10px // z.B. Helvetica == CSS Name der Webfont textWidth = context.measureText(text).width; context.fillText(text, 100, 100); //fillText(text, x, y) Fülle Pfad mit den in fillStyle definierten Eigenschaften context.strokeText(text, 100, 100); //strokeText(text, x, y) Zeichne Text mit den in strokeStyle definierten Eigenschaften

HTML5 / Javascript Code Teilen

Javascript Snippet auf Facebook teilen  Facebook
Javascript Snippet auf Facebook teilen  Google+