Created
April 20, 2011 10:57
-
-
Save cpietsch/930991 to your computer and use it in GitHub Desktop.
just finish my research on how to make a raw html5 version out of my new logo. must say: html5 is bad ass! to get the “multiply” effect in html5 working (used in photoshop for the 3 layers) i had to render each layer “offscreen” by using a renderToCanvas
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> | |
| <html><head> | |
| <!-- read http://www.chrispie.com/blog/html5-logo-1037/ for more infos --> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>chrispie logo</title> | |
| <style type="text/css" media="screen"> | |
| </style> | |
| <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
| <script language="javascript" type="text/javascript" src="context_blender.js"></script> | |
| <script type="text/javascript"> | |
| var i=1000; | |
| function drawShape(ctx,color,color2,size){ | |
| var bs=10; | |
| // Filled triangle | |
| ctx.fillStyle = color; | |
| ctx.beginPath(); | |
| ctx.moveTo(0,0); | |
| ctx.lineTo(size,0); | |
| ctx.lineTo(size/2,size/2*Math.sqrt(3)); | |
| ctx.fill(); | |
| ctx.closePath(); | |
| ctx.fillStyle = color2; | |
| ctx.beginPath(); | |
| ctx.moveTo(15,10/2*Math.sqrt(3)); | |
| ctx.lineTo(size-15,10/2*Math.sqrt(3)); | |
| ctx.lineTo(size/2,size/2*Math.sqrt(3)-15); | |
| ctx.fill(); | |
| ctx.closePath(); | |
| return ctx; | |
| } | |
| function draw(){ | |
| var ani=(parseInt(Math.PI*2/(i)*100)); | |
| //if(ani==0){ i=1; } | |
| var ctx = canvas.getContext('2d'); | |
| canvas.width = canvas.width; // clear canvas | |
| var yel = renderToCanvas(100, 100, function (ctx) { | |
| drawShape(ctx,"#ffff00","#ffc200",100) | |
| }); | |
| var blu = renderToCanvas(100, 100, function (ctx) { | |
| drawShape(ctx,"#41c1ff","#0075f4",100) | |
| }); | |
| var red = renderToCanvas(100, 100, function (ctx) { | |
| drawShape(ctx,"#ff52b7","#ea0053",100) | |
| }); | |
| blu.getContext('2d').blendOnto(ctx,'multiply',{destX:100-ani,destY:100}); | |
| red.getContext('2d').blendOnto(ctx,'multiply',{destX:150+ani,destY:100}); | |
| yel.getContext('2d').blendOnto(ctx,'multiply',{destX:125,destY:144+ani}); | |
| //i++; | |
| } | |
| function init(){ | |
| var canvas = document.getElementById("canvas"); | |
| if (canvas.getContext){ | |
| setInterval(draw,50); | |
| } else { | |
| alert('You need Safari or Firefox 1.5+ to see this demo.'); | |
| } | |
| } | |
| var renderToCanvas = function (width, height, renderFunction) { | |
| var buffer = document.createElement('canvas'); | |
| buffer.width = width; | |
| buffer.height = height; | |
| renderFunction(buffer.getContext('2d')); | |
| return buffer; | |
| }; | |
| function handleMouseMove(evt) { | |
| var mouseX = evt.clientX - canvas.offsetLeft; | |
| var mouseY = evt.clientY - canvas.offsetTop; | |
| i=Math.abs(180-mouseX)+Math.abs(160-mouseY); | |
| } | |
| </script> | |
| </head><body onload="init();" onmousemove="handleMouseMove(event)"> | |
| <canvas id="canvas" width="500" height="500"></canvas> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment