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

具体代码如下，可直接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. npm 配置 registry 以及使用 nrm

    由于众所周知的原因,我们的内网链接互联网时非常不稳定,速度慢而且经常下载失败.为了提高下载安装 npm 包的体验,很多人都会把 npm 的 registry 配置成国内镜像,我们一般用的比较多的就是淘 ...

  2. C/C++ Qt TableDelegate 自定义代理组件

    TableDelegate 自定义代理组件的主要作用是对原有表格进行调整,例如默认情况下Table中的缺省代理就是一个编辑框,我们只能够在编辑框内输入数据,而有时我们想选择数据而不是输入,此时就需要重 ...

  3. Atcoder Regular Contest 089 D - ColoringBalls（DP）

    Atcoder 题面传送门 & 洛谷题面传送门 神仙题. 在下文中,方便起见,用 R/B 表示颜色序列中球的颜色,用 r/b 表示染色序列中将连续的区间染成的颜色. 首先碰到这一类计算有多少个 ...

  4. 【2020五校联考NOIP #2】矩阵

    咕咕咕到现在~ 题面传送门 题意: 给出一个 \(n\times n\) 的矩阵 \(A\).要你求有多少个 \(n\times n\) 的矩阵 \(B\) 满足: 每一行都是 \(1\) 到 \(n ...

  5. STL的equal_range()

    equal_range()根据键值,返回一对迭代器的pair对象. 如果该键值在容器中存在,则pair对象中的第一个迭代器指向该键关联的第一个实例,第二个迭代器指向该键关联的最后一个实例的下一位置. ...

  6. pip 与 conda

    pip 与 conda 简介 pip 是接触 python 后最早认识的包管理工具.通过使用 pip 能够自动下载和解决不同 python 模块的依赖问题,使 python 的配置过程变得简单. 与 ...

  7. Scrapy-Redis的安装和使用

    Scrapy-Redis是Scrapy的分布式扩展模块,有了它,我们就可以方便地实现Scrapy分布式爬虫的搭建.GitHub:https://github.com/rmax/scrapy-redis ...

  8. 脱离Editor、VS等IDE如何编译UE4工程

    在Windows平台下,我们从.uproject文件生成VS解决方案.sln文件 .uproject文件用于打开Editor .sln文件用于打开VS工程 对于有增加C++代码的工程,Editor中和 ...

  9. 关于写SpringBoot+Mybatisplus+Shiro项目的经验分享一：简单介绍

    这次我尝试写一个原创的项目 the_game 框架选择: SpringBoot+Mybatisplus+Shiro 首先是简单的介绍(素材灵感来自英雄联盟) 5个关键的表: admin(管理员): l ...

  10. 在Idea上用JDBC连接mysql数据库

    一.前言 本次操作建立在idea中java环境已配置的基础上 二.操作步骤 1.建立Web项目后,添加驱动包 mysql-connector-java-5.0.8-bin.jar (1)下载mysql ...