Comments: This article mainly introduces the rose effect drawn by HTML5 canvas. It is suitable for programmers to send to their friends in the plot.
Someone wrote a beautiful rose in html, isn't it a little cool. Just got the rose from javascipt, and again showed the power of HTML5.
Warning it is said that IE6 kernel cannot be seen. Chrome or Firefox is recommended.
Rose effect:
Implementation Code:
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> Love </title>
<Meta charset = "UTF-8"/>
<! -- [If IE]>
<Script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<! [Endif] -->
</Head>
<Body>
<Canvas id = "c"> </canvas>
<Script>
Var B = document. body;
Var c = document. getElementsByTagName ('canvas ') [0];
Var a = c. getContext ('2d ');
Document. body. clientWidth;
</Script>
<Script>
// Start of submission //
With (m = Math) C = cos, S = sin, P = pow, R = random; c. width = c. height = f = 500; h =-250; function p (a, B, c) {if (c> 60) return [S (a * 7) * (13 + 5 /(. 2 + P (B * 4, 4)-S (B) * 50, B * f + 50,625 + C (a * 7) * (13 + 5 /(. 2 + P (B * 4, 4) + B * 400, a * 1-B/2, a]; A = a * 2-1; B = B * 2-1; if (A * A + B * B <1) {if (c> 37) {n = (j = c & 1 )? 6: 4; o =. 5/(a +. 01) + C (B * 125) * 3-a * 300; w = B * h; return [o * C (n) + w * S (n) + j * 610-390, o * S (n)-w * C (n) + 550-j * 350,118 0 + C (B +) * 99-j * 300 ,. 4-*. 1 + P (1-B * B,-h * 6 )*. 15-a * B *. 4 + C (a + B)/5 + P (C (o * (a + 1) + (B> 0? W:-w)/25), 30 )*. 1 * (1-B * B), o/1e3 +. 7-o * w * 3e-6]} if (c> 32) {c = c * 1.16 -. 15; o = a * 45-20; w = B * h; z = o * S (c) + w * C (c) + 620; return [o * C (c)-w * S (c), 28 + C (B *. 5) * 99-B * 60-z/2-h, z, (B *. 3 + P (1-(A * A), 7 )*. 15 +. 3) * B, B *. 7]} o = A * (2-B) * (80-c * 2); w = 99-C (A) * 120-C (B) * (-h-c * 4.9) + C (P (1-B, 7) * 50 + c * 2; z = o * S (c) + w * C (c) + 700; return [o * C (c) -w * S (c), B * 99-C (P (B, 7) * 50-c/3-z/1.35 + 450, z, (1-B/1.2 )*. 9 + *. 1, P (1-B), 20)/4 +. 05]} setInterval ('for (I = 0; I <1e4; I ++) if (s = p (R (), R (), I % 46 /. 74) {z = s [2]; x = ~~ (S [0] * f/z-h); y = ~~ (S [1] * f/z-h); if (! M [q = y * f + x] | m [q]> z) m [q] = z, a. fillStyle = "rgb (" ++ ~ (S [3] * h) + "," + ~ (S [4] * h) + "," + ~ (S [3] * s [3] *-80) + ")", a. fillRect (x, y, 1, 1)} ', 0)
// End of submission //
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
