Created
June 8, 2010 18:20
-
-
Save bryckbost/430429 to your computer and use it in GitHub Desktop.
Simple canvas example to draw a rectangle with a pointed end
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE> | |
| <html> | |
| <head> | |
| <script type="application/javascript"> | |
| // https://developer.mozilla.org/en/Canvas_tutorial | |
| function draw() { | |
| var canvas = document.getElementById('canvas'); | |
| if (canvas) { | |
| var ctx = canvas.getContext("2d"); | |
| // top border | |
| ctx.fillStyle = "#FF973A"; | |
| // fillRect(x, y, width, height) | |
| ctx.fillRect (0, 0, 330, 1); | |
| // Create gradients | |
| // createLinearGradient(x1,y1,x2,y2) | |
| var lingrad = ctx.createLinearGradient(0,1,0,60); | |
| // addColorStop(position, color) position = 0.0 and 1.0 | |
| lingrad.addColorStop(0, '#e4611f'); | |
| lingrad.addColorStop(1, '#a8361f'); | |
| // assign gradients to fill and stroke styles | |
| ctx.fillStyle = lingrad; | |
| // Filled rect with a triangle cap | |
| ctx.beginPath(); | |
| // moveTo(x, y) | |
| ctx.moveTo(0,1); | |
| // lineTo(x, y) | |
| ctx.lineTo(330,1); | |
| ctx.lineTo(348,30); | |
| ctx.lineTo(330,60); | |
| ctx.lineTo(0, 60); | |
| ctx.lineTo(0,1); | |
| // fill the shape | |
| ctx.fill(); | |
| } | |
| } | |
| </script> | |
| <style type="text/css" media="screen"> | |
| body { | |
| background: #222; | |
| } | |
| </style> | |
| </head> | |
| <body onload="draw();"> | |
| <canvas id="canvas" width="350" height="60"></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment