ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

canvas绘制圣诞树

2021-12-17 15:34:45  阅读:196  来源: 互联网

标签:canvas ++ 绘制 100% height 圣诞树 var 哈哈哈 border


最近不知道咋的都玩起了用备忘录手绘圣诞树,作为万能的程序员,肯定也要跟上潮流,那用代码来实现圣诞树吧。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 实现效果如下: 具体代码如下,可直接cv复用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				border: 0;
			}

			div {
				margin: 0;
				padding: 0;
				border: 0;
			}

			.nav {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 27px;
				background-color: white;
				color: black;
				text-align: center;
				line-height: 25px;
			}

			a {
				color: black;
				text-decoration: none;
				border-bottom: 1px dashed black;
			}

			a:hover {
				border-bottom: 1px solid red;
			}

			.previous {
				float: left;
				margin-left: 10px;
			}

			.next {
				float: right;
				margin-right: 10px;
			}

			.green {
				color: green;
			}

			.red {
				color: red;
			}

			textarea {
				width: 100%;
				height: 100%;
				border: 0;
				padding: 0;
				margin: 0;
				padding-bottom: 20px;
			}

			.block-outer {
				float: left;
				width: 22%;
				height: 100%;
				padding: 5px;
				border-left: 1px solid black;
				margin: 30px 3px 3px 3px;
			}

			.block-inner {
				height: 68%;
			}

			.one {
				border: 0;
			}
		</style>
	</head>
	<body marginwidth="0" marginheight="0">
		<canvas id="c" height="356" width="446">
			<script type="text/javascript">
				var collapsed = true;

				function toggle() {
					var fs = top.document.getElementsByTagName('frameset')[0];
					var f = fs.getElementsByTagName('frame');
					if (collapsed) {
						fs.rows = '250px,*';
						fs.noResize = false;
						f[0].noResize = false;
						f[1].noResize = false;
					} else {
						fs.rows = '30px,*';
						fs.noResize = true;
						f[0].noResize = true;
						f[1].noResize = true;
					}
					collapsed = !collapsed;
				}


				var b = document.body;
				var c = document.getElementsByTagName('canvas')[0];
				var a = c.getContext('2d');
				document.body.clientWidth; 


				M = Math;
				Q = M.random;
				J = [];
				U = 16;
				T = M.sin;
				E = M.sqrt;
				for (O = k = 0; x = z = j = i = k < 200;) with(M[k] = k ? c.cloneNode(0) : c) {
					width = height = k ? 32 : W = 446;
					with(getContext('2d')) if (k > 10 | !k)
							for (font = '60px Impact', V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V +
								'205,205,215,.15)' : V + (147 + I) + ',' + (k % 2 ? 128 + I : 0) + ',' + I + ',.5)' : '#cca',
								i < 7;) beginPath(fill(arc(U - i / 3, 24 - i / 2, k == 13 ? 4 - (i++) / 2 : 8 - i++, 0, M.PI *
								2, 1)));
						else
							for (; x = T(i), y = Q() * 2 - 1, D = x * x + y * y, B = E(D - x / .9 - 1.5 * y + 1), R = 67 * (B +
									1) * (L = k / 9 + .8) >> 1, i++ < W;)
								if (D < 1) beginPath(strokeStyle = V + R + ',' + (R + B * L >> 0) + ',40,.1)'), moveTo(U + x *
									8, U + y * 8), lineTo(U + x * U, U + y * U), stroke();
					for (y = H = k + E(k++) * 25, R = Q() * W; P = 3, j < H;) J[O++] = [x += T(R) * P + Q() * 6 - 3, y += Q() *
						U - 8, z += T(R - 11) * P + Q() * 6 - 3, j / H * 20 + ((j += U) > H & Q() > .8 ? Q(P = 9) * 4 :
							0) >> 1
					]
				}
				setInterval(function G(m, l) {
					A = T(D - 11);
					if (l) return (m[2] - l[2]) * A + (l[0] - m[0]) * T(D);
					a.clearRect(0, 0, W, W);
					J.sort(G);
					for (i = 0; L = J[i++]; a.drawImage(M[L[3] + 1], 207 + L[0] * A + L[2] * T(D) >> 0, L[1] >> 1)) {
						if (i == 2e3) a.fillText('Merry Christmas!', U, 345);
						if (!(i % 7)) a.drawImage(M[13], ((157 * (i * i) + T(D * 5 + i * i) * 5) % W) >> 0, ((113 * i + (D *
							i) / 60) % (290 + i / 99)) >> 0);
					}
					D += .02
				}, 1)
			</script>
	</body>
</html>

通过以上代码就可以实现圣诞树,可根据需求自行修改 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

标签:canvas,++,绘制,100%,height,圣诞树,var,哈哈哈,border
来源: https://www.cnblogs.com/jimyking/p/15702387.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有