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 - 1/8 rest HTML 5 canvas example</title>
Line 6 :
Line 7 : <!--
Line 8 : Music symbol 1/8 rest 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 drawShape(){
Line 30 : var canvas = document.getElementById('cssxCoordinates');
Line 31 : if (canvas.getContext){
Line 32 : var ctx = canvas.getContext('2d');
Line 33 : var x = 0; // x_start
Line 34 : var y = 85; // y_start
Line 35 : var rest = 8; // 8, 16, 32, 64, 128
Line 36 :
Line 37 : drawRest(ctx,x,y,rest);
Line 38 :
Line 39 : } else {
Line 40 : alert('You need Firefox 1.5+, Google Chrome 8.0+, Internet Explorer 8.0+ or Safari 4.0+ to see the example.');
Line 41 : }
Line 42 : }
Line 43 :
Line 44 : function drawRest(ctx,x,y,rest){
Line 45 :
Line 46 : var number_of_bullets = 0;
Line 47 :
Line 48 : var x_offset_rest = 4;
Line 49 : var y_offset_rest = 40;
Line 50 : var x_delta_rest = 43;
Line 51 : var y_delta_rest = 113;
Line 52 :
Line 53 : switch(rest) {
Line 54 : case 8:
Line 55 : number_of_bullets = 1;
Line 56 : y = y + 174;
Line 57 : break;
Line 58 : case 16:
Line 59 : number_of_bullets = 2;
Line 60 : y = y + 287;
Line 61 : break;
Line 62 : case 32:
Line 63 : number_of_bullets = 3;
Line 64 : y = y + 287;
Line 65 : break;
Line 66 : case 64:
Line 67 : number_of_bullets = 4;
Line 68 : y = y + 400;
Line 69 : break;
Line 70 : case 128:
Line 71 : number_of_bullets = 5;
Line 72 : y = y + 400;
Line 73 : break;
Line 74 : }
Line 75 :
Line 76 : var x_corner = x - x_offset_rest;
Line 77 : var y_corner = y - y_offset_rest;
Line 78 :
Line 79 : for(var i=1; i<=number_of_bullets; i++) {
Line 80 : ctx.save();
Line 81 : if(i==1) {
Line 82 : ctx.translate(x_corner,y_corner);
Line 83 : } else {
Line 84 : ctx.translate(x_delta_rest, -1*y_delta_rest);
Line 85 : }
Line 86 :
Line 87 : ctx.beginPath();
Line 88 : ctx.moveTo(121,10);
Line 89 :
Line 90 : ctx.quadraticCurveTo(115,10,112,10);
Line 91 : ctx.quadraticCurveTo(106,25,99,44);
Line 92 : ctx.quadraticCurveTo(88,55,77,58);
Line 93 : ctx.quadraticCurveTo(70,61,62,61);
Line 94 : ctx.quadraticCurveTo(72,51,71,40);
Line 95 : ctx.quadraticCurveTo(72,28,64,20);
Line 96 : ctx.quadraticCurveTo(53,7,37,7);
Line 97 : ctx.quadraticCurveTo(22,7,14,16);
Line 98 : ctx.quadraticCurveTo(5,23,4,39);
Line 99 : ctx.quadraticCurveTo(4,54,13,63);
Line 100 : ctx.quadraticCurveTo(23,73,37,74);
Line 101 : ctx.quadraticCurveTo(67,76,95,54);
Line 102 : ctx.quadraticCurveTo(73,113,42,194);
Line 103 : ctx.quadraticCurveTo(47,194,51,194);
Line 104 : ctx.quadraticCurveTo(104,54,121,10);
Line 105 :
Line 106 : ctx.fill();
Line 107 : }
Line 108 :
Line 109 : ctx.restore();
Line 110 : }
Line 111 : </script>
Line 112 : </head>
Line 113 : <body onload="drawShape();">
Line 114 : <h1>1/8 rest</h1>
Line 115 : <canvas id="cssxCoordinates" width="1000" height="1000"></canvas>
Line 116 : </body>
Line 117 : </html>