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

具体代码如下，可直接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. [bzoj1416]神奇的口袋

    容易发现操作任意次并不会改变每一个点的概率(因为每一个点加d的概率相同,期望与原数成比例),然后直接输出即可(要用高精度) 1 #include<bits/stdc++.h> 2 usin ...

  2. 通过 for 循环，比较 Python 与 Ruby 编程思想的差别

    作者:Doug Turnbull 译者:豌豆花下猫@Python猫 原文:https://softwaredoug.com/blog/2021/11/12/ruby-vs-python-for-loo ...

  3. Go语言核心36讲（Go语言实战与应用十三）--学习笔记

    35 | 并发安全字典sync.Map (下) 我们在上一篇文章中谈到了,由于并发安全字典提供的方法涉及的键和值的类型都是interface{},所以我们在调用这些方法的时候,往往还需要对键和值的实际 ...

  4. banner.txt

    Spring Boot Version: ${spring-boot.version} __----~~~~~~~~~~~------___ . . ~~//====...... __--~ ~~ - ...

  5. c链表中指针的一些用法要点

    /* 结构体不能含有同类型的结构,但是可以含有指向同类型结构的指针.这样的定义是定义一个链表的基础. */1 typedef int Element; 2 3 typedef struct node{ ...

  6. Codeforces 1455G - Forbidden Value（map 启发式合并+DP）

    Codeforces 题面传送门 & 洛谷题面传送门 首先这个 if 与 end 配对的结构显然形成一个树形结构,考虑把这棵树建出来,于是这个程序的结构就变为,对树进行一遍 DFS,到达某个节 ...

  7. python——关变量下划线叙述

    _xx:前置单下划线,私有化属性或方法,一般来讲,变量名_xx被看作是"私有 的",在模块或类外不可以使用.当变量是私有的时候,用_xx 来表示变量是很好的习惯.类对象和子类可以访 ...

  8. Linux软件安装管理：rpm与yum

    目录 1. rpm包的管理 1.1 介绍 1.2 rpm包的简单查询指令 1.3 rpm 包名的基本格式 1.4 rpm其它指令 1.5 卸载rpm包 1.6 安装rpm包 2. yum 2.1 说明 ...

  9. Nginx+uwsgi+django+vue部署项目

    购买服务器 # 购买阿里云服务器 # 短期或是测试使用,创建 按量收费 服务器,可以随时删除,删除后不再计费,但要保证账户余额100元以上 连接服务器 1)账号 >: ssh root@39.9 ...

  10. PL\SQL和PL/SQL Developer 12安装与配置

    安装: (1)在已有安装包的情况下,直接将安装包解压到文件夹下,注意不要解压缩到c:\programs Files(x86)的文件夹下,不能解压缩到有中文文件夹命名的文件夹下面 (2)没有安装包的情况 ...