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

具体代码如下，可直接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. [bzoj1177]Oil

    考虑将三个矩形按某种方式划分为再三个大矩形中找最大值,容易发现只有6种划分方式,分为两类:1.4种,考虑第一条横/竖和第二条在第一条的两侧,这一类情况只需要预处理出左上/左下/右上/右下的最大子矩阵即 ...

  2. 查询某个信息下只有一条数据的sql

  3. JdbcTemplate 、Mybatis、ORM 、Druid 、HikariCP 、Hibernate是什么？它们有什么关系？

    JdbcTemplate .Mybatis.ORM .Druid .HikariCP .Hibernate是什么?它们有什么关系? 学完Spring和SpringMVC之后,就急于求成的开始学习起Sp ...

  4. 8.4 k8s实现Nginx+Php+WordPress+MySQL实现完全容器化的web站点案例

    1.制作Nginx镜像 1.1 使用nginx:1.21.1官方镜像 # 下载官方镜像 docker pull nginx:1.21.1 # 打本地harbor的tag docker tag 192. ...

  5. 记一次 .NET 某智能服装智造系统 内存泄漏分析

    一:背景 1. 讲故事 上个月有位朋友找到我,说他的程序出现了内存泄漏,不知道如何进一步分析,截图如下: 朋友这段话已经说的非常言简意赅了,那就上 windbg 说话吧. 二:Windbg 分析 1. ...

  6. 【玩具】使用Python自动化发送微信消息进行订水

    事情是这样的,我知道淘宝上有卖一种USB接口的大按钮,估计是给工厂或者医院之类的场景设计的,样子长这样: 然后我就一直挺想搞一个的,不为别的,就是玩,但是想来想去也没想到这玩意儿对我而言能有啥用途,就 ...

  7. 使用 SpringBoot 构建一个RESTful API

    目录 背景 创建 SpringBoot 项目/模块 SpringBoot pom.xml api pom.xml 创建 RESTful API 应用 @SpringBootApplication @C ...

  8. R数据科学-1

    R数据科学(R for Data Science) Part 1:探索 by: PJX for 查漏补缺 exercise: https://jrnold.github.io/r4ds-exercis ...

  9. 卷积神经网络（Convolutional Neural Networks)CNN

     申明:本文非笔者原创,原文转载自:http://www.36dsj.com/archives/24006 自今年七月份以来,一直在实验室负责卷积神经网络(Convolutional Neural ...

  10. 模拟串口UART的实现

    我所祷告的,就是要你们的爱心,在知识和见识上,多而又多,使你们能分辨是非,做诚实无过的人,直到基督的日子.--腓立比书[1:9~10] 最近在调的MCU的型号为STM32F030,配置芯片相较之前的M ...