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

具体代码如下，可直接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. soname and real name

    [1] https://wiki.openssl.org/index.php/OpenSSL_1.1.0_Changes#Backward_compatibility [2] https://akka ...

  2. 利用Fastjson注入Spring内存马

    此篇文章在于记录自己对spring内存马的实验研究 一.环境搭建 搭建漏洞环境,利用fastjson反序列化,通过JNDI下载恶意的class文件,触发恶意类的构造函数中代码,注入controller ...

  3. [hdu4747]Mex

    首先计算出以1为左端点的所有区间的mex,考虑删除左端点仍然维护这个序列:设当前删除点下一次出现在y,y~n的mex不变,从左端点到y的点中大于删除值的点要变成删除值,因为这个是不断递增的,所以是一段 ...

  4. 没有人比我更会使用集合！对, 是dart中的集合

    目录 简介 List的使用 Set的使用 Map的使用 常见的集合方法 总结 简介 dart中的集合有三个,分别是list,set和map.dart在dart:core包中提供了对于这三种集合非常有用 ...

  5. 【Tool】IntelliJ IDEA 使用技巧

    IntelliJ IDEA 使用技巧 2019-11-06  20:51:43  by冲冲 1.快捷键 Ctrl+w //括出相关范围 Ctrl+shift+f //按照代码段在全局搜索 Ctrl+f ...

  6. 【Linux】（1）安装

    VMware虚拟机安装Linux,IP地址显示为127.0.0.1的解决方案 ① 打开该虚拟机,点击导航栏"虚拟机(M)",选择"设置(S)..." ② 将&q ...

  7. 【软连接已存在，如何覆盖】ln: failed to create symbolic link ‘file.txt’: File exists

    ln -s 改成 ln -sf f在很多软件的参数中意味着force ln -sf /usr/bin/bazel-1.0.0 /usr/bin/bazel

  8. Oracle-left join两表关联只取B表匹配到的第一条记录【over partition by（分组后对组内数据排序）】

    背景:  A表.B表两表关联,关联出来的结果里B表有不止一条,需求是只要B表结果中的某一条(按某字段排序) 经过百度,发现 row_number() over(partition by a order ...

  9. oracle中char],varchar,varchar2

    VARCHAR.VARCHAR2.CHAR的区别 1．CHAR的长度是固定的,而VARCHAR2的长度是可以变化的, 比如,存储字符串"abc",对于CHAR (20),表示你存储 ...

  10. 🚀 RabbitMQ课程发布-KuangStudy

    RabbitMQ课程上线(44集) 视频教程地址:https://www.kuangstudy.com/course/detail/1323452886432944129 专栏地址:https://w ...