Skip to content
Newer
Older
100644 77 lines (70 sloc) 2.02 KB
ed0bded @remy Loading existing examples from html5demos.com
authored
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset=utf-8 />
5 <title>Canvas Gradient</title>
6 <style>
7 body {
8 background: #000;
9 }
10 canvas {
11 position: absolute;
12 top: 0;
13 left: 0;
14 height: 100%;
15 width: 100%;
16 }
17 </style>
18 </head>
19 <body>
20 <canvas height="600" width="600"></canvas>
21 <script>
22 var canvas = document.getElementsByTagName('canvas')[0],
23 ctx = null,
24 grad = null,
25 body = document.getElementsByTagName('body')[0],
26 color = 255;
27
28 if (canvas.getContext('2d')) {
29 ctx = canvas.getContext('2d');
30 ctx.clearRect(0, 0, 600, 600);
31 ctx.save();
32 // Create radial gradient
33 grad = ctx.createRadialGradient(0,0,0,0,0,600);
34 grad.addColorStop(0, '#000');
35 grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
36
37 // assign gradients to fill
38 ctx.fillStyle = grad;
39
40 // draw 600x600 fill
41 ctx.fillRect(0,0,600,600);
42 ctx.save();
43
44 body.onmousemove = function (event) {
45 var width = window.innerWidth,
46 height = window.innerHeight,
47 x = event.clientX,
48 y = event.clientY,
49 rx = 600 * x / width,
1ac00c8 Small fix in canvas-grad
kralyk authored
50 ry = 600 * y / height;
ed0bded @remy Loading existing examples from html5demos.com
authored
51
52 var xc = ~~(256 * x / width);
53 var yc = ~~(256 * y / height);
54
55 grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
56 grad.addColorStop(0, '#000');
57 grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
58 // ctx.restore();
59 ctx.fillStyle = grad;
60 ctx.fillRect(0,0,600,600);
61 // ctx.save();
62 };
63 }
64 </script>
ad614ee @remy Complete reorganisation of the directory so that making new demos app…
authored
65 <a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
66 <script>
67 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
68 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
69 </script>
70 <script>
71 try {
72 var pageTracker = _gat._getTracker("UA-1656750-18");
73 pageTracker._trackPageview();
74 } catch(err) {}</script>
75
ed0bded @remy Loading existing examples from html5demos.com
authored
76 </body>
77 </html>
Something went wrong with that request. Please try again.