Skip to content

Instantly share code, notes, and snippets.

@tagr

tagr/HTML-Canvas-Line-Demo.markdown

Created January 24, 2015 13:43
Show Gist options
  • Save tagr/4bc746997cee537bb58a to your computer and use it in GitHub Desktop.
Save tagr/4bc746997cee537bb58a to your computer and use it in GitHub Desktop.
Download ZIP
HTML Canvas Line Demo
Raw
HTML-Canvas-Line-Demo.markdown
Raw
index.jade
canvas(id='c',width='800',height='600')
Raw
script.js
var CanvasPen = function(options){
var doc = document,
canvas = doc.querySelector('#c'),
canvasH = canvas.height,
canvasW = canvas.width,
context = canvas.getContext('2d'),
randomize = function(seed) {
return Math.floor(Math.random()*seed);
},
drawLine = function(points) {
context.lineWidth = 1;
context.strokeStyle = 'rgba('+randomize(196)+','+randomize(0)+','+(randomize(128)+127)+','+Math.random()+')';
context.beginPath();
context.moveTo(points.x1,points.y1);
context.lineTo(points.x2,points.y2);
context.stroke();
context.closePath();
},
setup = function() {
context.lineCap = 'square';
return true;
},
clear = function() {
context.clearRect(0, 0, canvasW, canvasH);
return 0;
},
start = options.init ? setup() : false,
LIMIT = 4096,
counter = 0;
setInterval(function(){
counter = (counter > LIMIT) ? clear() : counter + 1;
drawLine({
x1:Math.round(Math.random())*canvasW,
y1:Math.round(Math.random())*canvasH,
x2:randomize(canvasW),
y2:randomize(canvasH)
});
}, 1);
}({init:true});
Raw
style.scss
body {
background: #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment