这篇文章给大家分享的是有关html如何使用canvans画布实现玫瑰花的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
玫瑰花
送一朵玫瑰表示我对你的爱,使用canvans画布实现：
<!DOCTYPE HTML>
<html>
<head>
<title>Rose</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,
body {
height: 100%;
}
</style>
</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>
with m = Math) C = cos, S = sin, P = pow, R = random;
c.width = c.height = f = 600; h = -250;
function pa, b, c) {
if c > 60)
return [Sa * 7) * 13 + 5 / .2 + Pb * 4, 4))) - Sb) * 50, b * f + 50, 625 + Ca * 7) * 13 + 5 / .2 + Pb * 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) + Cb * 125) * 3 - a * 300; w = b * h; return [o * Cn) + w * Sn) + j * 610 - 390, o * Sn) - w * Cn) + 550 - j * 350, 1180 + CB + A) * 99 - j * 300, .4 - a * .1 + P1 - B * B, -h * 6) * .15 - a * b * .4 + Ca + b) / 5 + PCo * 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 * b * h; z = o * Sc) + w * Cc) + 620; return [o * Cc) - w * Sc), 28 + CB * .5) * 99 - b * b * b * 60 - z / 2 - h, z, b * b * .3 + P1 - A * A)), 7) * .15 + .3) * b, b * .7] } o = A * 2 - b) * 80 - c * 2);
w = 99 - CA) * 120 - Cb) * -h - c * 4.9) + CP1 - b, 7)) * 50 + c * 2;
z = o * Sc) + w * Cc) + 700;
return [o * Cc) - w * Sc), B * 99 - CPb, 7)) * 50 - c / 3 - z / 1.35 + 450, z, 1 - b / 1.2) * .9 + a * .1, P1 - b), 20) / 4 + .05]
}
}
setInterval'fori=0;i<1e4;i++)ifs=pR),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.fillRectx,y,1,1)}', 0)
</script>
</body>
</html>