├── LICENSE ├── README.md ├── bower.json ├── demo.html ├── lines.js └── lines.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 İsmail Demirbilek 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Lines.js 2 | 3 | 4 | Beautiful diagonal background lines. 5 | 6 | ## Get Lines 7 | * Via bower: 8 | 9 | ```bash 10 | bower install lines 11 | ``` 12 | * Or, you can simply [download](https://github.com/dbtek/lines/archive/1.0.1.zip) from GitHub. 13 | 14 | ## Usage 15 | 16 | * Download and include lines.js inside your html. 17 | ```html 18 | 19 | ``` 20 | 21 | * Add a canvas element to the page. 22 | ```html 23 |

24 | ``` 25 | 26 | * Use with default options: 27 | 28 | ```javascript 29 | new lines().draw(); 30 | ``` 31 | * Use with customizations: 32 | 33 | ```javascript 34 | new lines({canvas: 'canvas-id', pieces: 3, color: '#D34567'}).draw(); 35 | ``` 36 | 37 | * For quick implementation take a look at included [demo](https://github.com/dbtek/lines/blob/master/demo.html). 38 | 39 | #### Options 40 | **canvas:** Canvas HTML id. 41 | **pieces:** Number of lines to be drawn. 42 | **color:** Hex code of the lines' color. 43 | 44 | ## License 45 | * Open-sourced under [MIT](http://opensource.org/licenses/MIT) license. 46 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lines", 3 | "main": "lines.js", 4 | "version": "1.0.1", 5 | "homepage": "https://dbtek.github.io/lines", 6 | "authors": [ 7 | "Ismail Demirbilek " 8 | ], 9 | "description": "Diagonal background lines", 10 | "keywords": [ 11 | "diagonal", 12 | "background", 13 | "lines", 14 | "html5", 15 | "canvas" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lines.js 5 | 6 | 7 | 8 | 9 | 10 | 37 | 38 | 39 |

40 | 41 |

42 |

Lines.js Demo

43 |

44 | This page demonstrates default usage of lines.js For more information visit home of lines.js. 45 |

46 |

47 | 48 | 49 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /lines.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Lines.js 3 | * http://dbtek.github.io/lines 4 | * 5 | * Copyright (c) 2014, Ismail Demirbilek 6 | * Published under MIT License 7 | * http://opensource.org/licenses/MIT 8 | */ 9 | 10 | function lines(options){ 11 | // Set default options 12 | this.setDefaults(); 13 | 14 | // Check options param and override properties if they are not null 15 | if(typeof(options) != 'undefined'){ 16 | if('canvas' in options) 17 | this.setCanvas(options.canvas); 18 | if('pieces' in options) 19 | this.setPieces(options.pieces); 20 | if('color' in options) 21 | this.setColor(options.color); 22 | } 23 | 24 | return this; 25 | } 26 | 27 | /** 28 | * Default properties 29 | */ 30 | lines.prototype.defaults = { 31 | canvas: 'lines-canvas', 32 | pieces: 5, 33 | color: '#EEE' 34 | }; 35 | 36 | /** 37 | * setCanvas() sets canvas id which will contain lines 38 | * 39 | * @param canvas 40 | */ 41 | lines.prototype.setCanvas = function(canvas){ 42 | this.canvas = canvas; 43 | return this; 44 | }; 45 | 46 | /** 47 | * setPieces() sets number of lines to be drawn 48 | * 49 | * @param pieces 50 | */ 51 | lines.prototype.setPieces = function(pieces){ 52 | this.pieces = pieces; 53 | return this; 54 | }; 55 | 56 | /** 57 | * setColor() sets the hex color of the lines 58 | * 59 | * @param color 60 | */ 61 | lines.prototype.setColor = function(color){ 62 | this.color = color; 63 | return this; 64 | }; 65 | 66 | /** 67 | * clearCanvas() clears the canvas 68 | * To avoid multiple drawings 69 | */ 70 | lines.prototype.clearCanvas = function(){ 71 | var cnv = document.getElementById(this.canvas); 72 | var ctx = cnv.getContext("2d"); 73 | ctx.clearRect(0, 0, cnv.width, cnv.height); 74 | 75 | return this; 76 | }; 77 | 78 | /** 79 | * setDefaults() sets the default options 80 | */ 81 | lines.prototype.setDefaults = function(){ 82 | this.canvas = this.defaults.canvas; 83 | this.pieces = this.defaults.pieces; 84 | this.color = this.defaults.color; 85 | 86 | return this; 87 | }; 88 | 89 | /** 90 | * draw() is the main method, clears the canvas and draws the lines 91 | * Based on the options provided 92 | */ 93 | lines.prototype.draw = function(){ 94 | this.clearCanvas(); 95 | 96 | var cnv = document.getElementById(this.canvas); 97 | var ctx = cnv.getContext("2d"); 98 | 99 | ctx.strokeStyle = this.color; 100 | 101 | ctx.beginPath() 102 | 103 | for(i=0; i cnv.height && rndY2 > cnv.height) 111 | rndY2 -= parseInt(Math.random() * cnv.height); 112 | 113 | ctx.moveTo(0,rndY); 114 | ctx.lineTo(cnv.width,rndY2); 115 | ctx.stroke(); 116 | 117 | console.log('Lines: Drawing piece ' + (i+1) + ' (0,' + rndY + ') to (' + cnv.width + ',' + rndY2 + ')'); 118 | } 119 | 120 | return this; 121 | }; 122 | -------------------------------------------------------------------------------- /lines.min.js: -------------------------------------------------------------------------------- 1 | /* http://dbtek.github.io/lines Ismail Demirbilek */ 2 | function lines(e){this.setDefaults();if(typeof e!="undefined"){if("canvas"in e)this.setCanvas(e.canvas);if("pieces"in e)this.setPieces(e.pieces);if("color"in e)this.setColor(e.color)}return this}lines.prototype.defaults={canvas:"lines-canvas",pieces:5,color:"#EEE"};lines.prototype.setCanvas=function(e){this.canvas=e;return this};lines.prototype.setPieces=function(e){this.pieces=e;return this};lines.prototype.setColor=function(e){this.color=e;return this};lines.prototype.clearCanvas=function(){var e=document.getElementById(this.canvas);var t=e.getContext("2d");t.clearRect(0,0,e.width,e.height);return this};lines.prototype.setDefaults=function(){this.canvas=this.defaults.canvas;this.pieces=this.defaults.pieces;this.color=this.defaults.color;return this};lines.prototype.draw=function(){this.clearCanvas();var e=document.getElementById(this.canvas);var t=e.getContext("2d");t.strokeStyle=this.color;t.beginPath();for(i=0;ie.height&&r>e.height)r-=parseInt(Math.random()*e.height);t.moveTo(0,n);t.lineTo(e.width,r);t.stroke();console.log("Lines: Drawing piece "+(i+1)+" (0,"+n+") to ("+e.width+","+r+")")}return this} 3 | --------------------------------------------------------------------------------