Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html>
- <!--
- This could be a lot better, but it works.
- Message passed to page with variable 'msg'
- will be hidden under moving red text
- and visable only when viewed through red glasses
- Kris Occhipinti July 22, 2013
- http://filmsbykris.com
- -->
- <head>
- <style>
- body {
- width: 100%;
- height: 100%;
- margin: 0px;
- padding: 0px;
- }
- </style>
- </head>
- <body>
- <canvas id="myCanvas" width="900px" height="800px"></canvas>
- <script>
- var canvas = document.getElementById('myCanvas');
- var context = canvas.getContext('2d');
- var msg = "<?php echo $_GET['msg'];?>";
- x = window.innerWidth/2/2;
- y = 75;
- context.canvas.width = window.innerWidth;
- context.canvas.height = window.innerHeight;
- text = "There are two types of Spies in this world. Good Spies and Bad Spies!";
- function wrapText(context, text, x, y, maxWidth, lineHeight) {
- var words = text.split(' ');
- var line = '';
- for(var n = 0; n < words.length; n++) {
- var testLine = line + words[n] + ' ';
- var metrics = context.measureText(testLine);
- var testWidth = metrics.width;
- if (testWidth > maxWidth && n > 0) {
- context.fillText(line, x, y);
- line = words[n] + ' ';
- y += lineHeight;
- }
- else {
- line = testLine;
- }
- }
- context.fillText(line, x, y);
- }
- function ani(){
- context.clearRect(0, 0, canvas.width, canvas.height);
- context.clearRect(0, 0, canvas.width, canvas.height);
- context.font = 'italic 50pt Calibri';
- context.fillStyle = "lightblue";
- // context.fillText(msg, x, y);
- wrapText(context, msg, x, y, window.innerWidth / 2 , 80)
- context.save();
- context.font = 'italic 20pt Calibri';
- for (var i=1;i < 500;i++){
- context.fillStyle = "rgb(255,0,0)";
- context.rotate(Math.PI*2/Math.random()/4);
- context.fillText(text, Math.random() * context.canvas.width - 200 , Math.random() * context.canvas.height);
- }
- for (var i=1;i < 100;i++){
- context.fillStyle = "rgb(255,0,0)";
- context.rotate(Math.PI*2/Math.random()/4);
- context.fillText(text, Math.random() * context.canvas.width - 200 , Math.random() * context.canvas.height);
- }
- context.restore();
- }
- setInterval( function(){ani();}, 100);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
