HTML 5 canvas music symbols examples |
Symbol and code | |
Canvas rendered text (works in Internet Explorer 8.0 and up)
| |
Download file
Line 2 : "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Line 3 : <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Line 4 : <head> Line 5 : <title>Mobilefish.com - Music title HTML 5 canvas example</title> Line 6 : Line 7 : <!-- Line 8 : Music title v. 1.0 Line 9 : Author: Robert Lie Line 10 : www.mobilefish.com Line 11 : Line 12 : This file is public domain. You can use it for any purpose without restriction. Line 13 : I do not guarantee that it is correct, so use it at your own risk. Line 14 : If you use it for something interesting, I'd appreciate hearing about it. Line 15 : If you find any bugs or make any improvements, I'd appreciate hearing about those too. Line 16 : It would also be nice if my name and URL were left in the comments. But none of that is required. Line 17 : Line 18 : Requires: File excanvas.compiled.js Line 19 : HTML5 Canvas for Internet Explorer Line 20 : See: http://code.google.com/p/explorercanvas/ Line 21 : --> Line 22 : Line 23 : <!--[if IE]> Line 24 : <script type="text/javascript" src="scripts/excanvas.compiled.js"></script> Line 25 : <![endif]--> Line 26 : <script type="text/javascript"> Line 27 : Line 28 : Line 29 : function drawText(){ Line 30 : var canvas = document.getElementById('cssxCoordinates'); Line 31 : if (canvas.getContext){ Line 32 : var ctx = canvas.getContext('2d'); Line 33 : Line 34 : var text = "Music"; Line 35 : ctx.translate(10,200); Line 36 : Line 37 : ctx.textAlign = "left"; // left, center, right Line 38 : ctx.fillStyle = "#000"; Line 39 : ctx.strokeStyle = "#f00"; Line 40 : ctx.font = "160px Optimer"; // 8, 10, 12, 16, 20, 24, 32, 40, 48, 54, 60 Line 41 : ctx.textBaseline = "alphabetic"; // top, hanging, middle, alphabetic, ideographic, bottom Line 42 : ctx.fillText(text, 0, 0); Line 43 : Line 44 : } else { Line 45 : alert('You need Firefox 1.5+, Google Chrome 8.0+, Internet Explorer 8.0+ or Safari 4.0+ to see the example.'); Line 46 : } Line 47 : } Line 48 : </script> Line 49 : </head> Line 50 : <body onload="drawText();"> Line 51 : <h1>Music title</h1> Line 52 : <canvas id="cssxCoordinates" width="600" height="400"></canvas> Line 53 : </body> Line 54 : </html> |