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

具体代码如下，可直接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绘制圣诞树的更多相关文章

  1. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  2. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  5. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  6. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  8. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  9. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

随机推荐

  1. HMS Core Insights第八期直播预告--创新能力解读

    [导读] 在上个月举办的HDC2021华为开发者大会上,全新登场的HMS Core 6向大家展示了包括媒体.图形.连接与通信等领域的众多全新开放能力.如仅用一部RGB摄像头的手机即可完成的3D建模,在 ...

  2. [loj6278]数列分块入门2

    做法1 以$K$为块大小分块,并对每一个块再维护一个排序后的结果,预处理复杂度为$o(n\log K )$ 区间修改时将整块打上标记,散块暴力修改并归并排序,单次复杂度为$o(\frac{n}{K}+ ...

  3. [noi110]翘课

    发现加边操作不好处理,因此考虑先加完所有边后删边. 删去一对边x到y,如果两者中有一个不翘课显然没有意义,那么如果都翘课了那么就对他们进行判断,如果无法翘课就继续搜下去. 这样的时间复杂度看上去似乎是 ...

  4. [bzoj1635]最高的牛

    初始如果没有限制,很显然每一头牛高度都是h当只有一个限制,让h[a]到h[b]的高度都减1即可容易发现两个限制不会相交(否则必然矛盾),只会包含或相离,因此没有影响,直接差分/线段树即可(注意:1.不 ...

  5. C/C++ Qt 给ListWidget增加右键菜单

    在上一篇博文<C/C++ Qt ListWidget 列表框组件应用>中介绍了ListWidget组件的基本使用技巧,本次将给ListWidget组件增加一个右键菜单,当用户在ListWi ...

  6. 洛谷 P5400 - [CTS2019]随机立方体（组合数学+二项式反演）

    洛谷题面传送门 二项式反演好题. 首先看到"恰好 \(k\) 个极大值点",我们可以套路地想到二项式反演,具体来说我们记 \(f_i\) 为钦定 \(i\) 个点为极大值点的方案数 ...

  7. Linux 进程与线程

    进程与线程   进程 进程就是在操作系统中运行的程序,是操作系统资源管理的最小单位.一个进程可以管理多个线程,线程相对轻量,可以共享进程地址空间 线程来源 一个进行在运行的过程中,不可能一直占据着CP ...

  8. perl FileHandle 模块使用

    打开多个文件时必备啊 1 use FileHandle; 2 3 my (%index,%fh); 4 # 创建句柄,这里利用gzip 压缩下 5 foreach my $k(keys %index) ...

  9. Redis—怎么查看Linux有没有安装Redis，如何启动Redis

    1.检测是否有安装redis-cli和redis-server [root@localhost bin]# whereis redis-cli redis-cli: /usr/bin/redis-cl ...

  10. 论文解读（SDNE）《Structural Deep Network Embedding》

    论文题目:<Structural Deep Network Embedding>发表时间:  KDD 2016 论文作者:  Aditya Grover;Aditya Grover; Ju ...