Download raw (8.5 KB)
// http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas // To draw dashed / dotted lines on a canvas var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype; if(CP && CP.lineTo) CP.dashedLine = function(x, y, x2, y2, dashArray){ if(! dashArray) dashArray=[10,5]; var dashCount = dashArray.length; var dx = (x2 - x); var dy = (y2 - y); var xSlope = (Math.abs(dx) > Math.abs(dy)); var slope = (xSlope) ? dy / dx : dx / dy; this.moveTo(x, y); var distRemaining = Math.sqrt(dx * dx + dy * dy); var dashIndex = 0; while(distRemaining >= 0.1){ var dashLength = Math.min(distRemaining, dashArray[dashIndex % dashCount]); var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); if(xSlope){ if(dx < 0) step = -step; x += step y += slope * step; }else{ if(dy < 0) step = -step; x += slope * step; y += step; } this[(dashIndex % 2 == 0) ? 'lineTo' : 'moveTo'](x, y); distRemaining -= dashLength; dashIndex++; } } // To draw dashed / dotted circles on a canvas if(CP && CP.lineTo) CP.dashedArc = function (x, y, r, startAngle, endAngle, antiClockwise, dashArray) { if(! dashArray) dashArray=[10,5]; var dashCount = dashArray.length; var distRemaining = (endAngle - startAngle) * (r - 1); var dashIndex = 0; stepStartAngle = 0; while(distRemaining >= 0.1){ var dashLength = Math.min(distRemaining, dashArray[dashIndex % dashCount]); var stepEndAngle = stepStartAngle + (dashLength / r); if(dashIndex % 2 == 0){ this.arc(x,y,r,stepStartAngle,stepEndAngle,antiClockwise); }else{ this.moveTo(x + (Math.cos(stepEndAngle) * r), y + (Math.sin(stepEndAngle) * r)); } stepStartAngle = stepEndAngle; distRemaining -= dashLength; dashIndex++; } } // To draw text on a circle if(CP && CP.lineTo) CP.fillTextCircle = function(text,x,y,radius,startRotation){ this.save(); this.translate(x,y); this.rotate(startRotation); var distance = 0; for(var i=0;i<text.length;i++){ this.save(); var letter_distance = (this.measureText(text.substr(0,(i + 1))).width - this.measureText(text.substr(0,i)).width); this.rotate((distance + (letter_distance / 2)) / radius); this.fillText(text[i],-(0.5*letter_distance),-radius); distance += letter_distance; this.restore(); } this.restore(); } var factor = 40; var baseSize = factor; var cnvs = null; var ctx = null; var width = null; var height = null; var words = null; function setBaseSize () { baseSize = $('#wrapper').width() / factor; $('body').css('font-size', baseSize); $('body').css('line-height', baseSize); } function calcSize (original) { return (original * baseSize); } function drawTextStickers () { drawTextCircle ([width * 0.05 + Math.random() * width * 0.85, Math.random() * width * 0.2], 'Free'); drawTextCircle ([width * 0.05 + Math.random() * width * 0.85, Math.random() * width * 0.2], 'Libre'); drawTextCircle ([width * 0.05 + Math.random() * width * 0.85, Math.random() * width * 0.2], 'Open'); drawTextCircle ([width * 0.05 + Math.random() * width * 0.85, Math.random() * width * 0.2], 'Source'); drawTextCircle ([width * 0.05 + Math.random() * width * 0.85, Math.random() * width * 0.2], 'Software'); drawTextCircle ([width * 0.05 + Math.random() * width * 0.85, Math.random() * width * 0.2], 'Arts-lab'); } function randomWord() { return $(words[Math.floor(Math.random() * words.length)]).html(); } function getColor() { var colors = ["rgb(255,136,0)","rgb(255,255,255)","rgb(78,232,255)"]; return colors[Math.floor(Math.random() * (colors.length))]; } function getEmptySticker() { var stickers = [empty_rounded_rectangle, empty_circle, empty_circle]; return stickers[Math.floor(Math.random() * (stickers.length))]; } function drawGrid () {; width = $("body").width(); height = $(document).height(); ctx.canvas.width = width; ctx.canvas.height = height; for (i=0; i < Math.floor(Math.random() * 300); i++) { var position = [Math.random() * width, Math.random() * height]; var sticker = getEmptySticker(); sticker(position); } } function empty_rectangle(position) { ctx.fillStyle = "rgb(255,255,0)"; ctx.fillRect(position[0] - 5, position[1] - 5, 150, 350); ctx.fillStyle = "rgb(0,0,0)"; } function empty_rounded_rectangle(position) { ctx.fillStyle = getColor(); ctx.save(); //ctx.translate((width/2), (height/2)); var x = position[0]; var y = position[1]; var radius = calcSize (0.4); var width = calcSize(4.166666667); var height = calcSize(8.938626133); ctx.rotate(Math.PI*2 * Math.random()); ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.dashedLine(x + radius, y, x + width - radius, y, [calcSize(0.4),calcSize(0.4)]); ctx.quadraticCurveTo(x + width, y, x + width, y + radius); ctx.dashedLine(x + width, y + radius, x + width, y + height - radius, [calcSize(0.4),calcSize(0.4)]); ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); ctx.dashedLine(x + width - radius, y + height, x + radius, y + height, [calcSize(0.4),calcSize(0.4)]); ctx.quadraticCurveTo(x, y + height, x, y + height - radius); ctx.dashedLine(x, y + height - radius, x, y + radius, [calcSize(0.4),calcSize(0.4)]); ctx.quadraticCurveTo(x, y, x + radius, y); ctx.moveTo(x + radius, y); ctx.closePath(); ctx.lineWidth = calcSize(0.03); ctx.strokeStyle = "rgb(50,50,50)"; ctx.stroke(); ctx.fillStyle = "rgb(0,0,0)"; ctx.restore(); } function empty_circle(position) { var radius = calcSize(1.4); ctx.fillStyle = getColor(); ctx.beginPath(); ctx.dashedArc(position[0], position[1], radius, 0, Math.PI * 2, false, [calcSize(0.4),calcSize(0.4)]); ctx.closePath(); ctx.lineWidth = calcSize(0.03); ctx.strokeStyle = "rgb(50,50,50)"; ctx.stroke(); ctx.fillStyle = "rgb(0,0,0)"; } function drawTextCircle (position, text) { ctx.fillStyle = getColor(); ctx.beginPath(); ctx.arc(position[0], position[1], calcSize(1.4), 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.font = "bold " + calcSize (0.5) + " 'propcouriersans'"; ctx.fillStyle = "rgb(0,0,0)"; ctx.fillTextCircle (text.toUpperCase(), position[0], position[1], calcSize(0.9), Math.random() * Math.PI * 2) } function moveBigStickers () { var angle = Math.random () * 360; $('#constant_variable_logo').css('top', (10 + Math.random () * 30) + '%'); $('#constant_variable_logo').css('transform', 'rotate(' + angle + 'deg)'); $('#constant_variable_logo').css('-ms-transform', 'rotate(' + angle + 'deg)'); $('#constant_variable_logo').css('-moz-transform', 'rotate(' + angle + 'deg)'); $('#constant_variable_logo').css('-webkit-transform', 'rotate(' + angle + 'deg)'); $('#constant_variable_logo').css('-o-transform', 'rotate(' + angle + 'deg)'); var angle = Math.random () * 90 - Math.random () * 90; $('#info_sticker').css('top', (30 + Math.random () * 30) + '%'); $('#info_sticker').css('transform', 'rotate(' + angle + 'deg)'); $('#info_sticker').css('-ms-transform', 'rotate(' + angle + 'deg)'); $('#info_sticker').css('-moz-transform', 'rotate(' + angle + 'deg)'); $('#info_sticker').css('-webkit-transform', 'rotate(' + angle + 'deg)'); $('#info_sticker').css('-o-transform', 'rotate(' + angle + 'deg)'); }file:///home/gijs/Documents/osp/osp.work.gallait/flyer+site/index.html $(document).ready(function () { cnvs = document.getElementById("drawing_surface"); ctx = cnvs.getContext("2d"); width = $("body").width(); height = $(document).height(); setBaseSize (); words = $('span.key') $('#key_wrapper').hide(); $('.details').hide(); $("div.label").draggable(); $(".logo").draggable(); $(window).resize(function() { setBaseSize (); drawGrid (); drawTextStickers (); moveBigStickers (); }); drawGrid (); moveBigStickers (); ctx.font = "bold " + calcSize (0.6) + " 'propcouriersans'"; // Force the browser to load the font ctx.fillText('ssss', 0, 0); $(document).bind ('readystatechange', function() { if (document.readyState == 'complete') { drawTextStickers (); $(document).unbind ('readystatechange'); } }); });2