💖 前言
圣诞贺卡作为圣诞节礼物在美国和欧洲很流行，许多家庭随贺卡带上年度家庭合照或家庭新闻，新闻一般包括家庭成员在过去一年的优点特长等内容。圣诞节这天寄赠圣诞贺卡，除表示庆贺圣诞的喜乐外，就是向亲友祝福，以表思念之情。尤其对在孤寂中的亲友，更是亲切的关怀和安慰。
圣诞节装饰包括：圣诞袜，最早以前是一对红色的大袜子，大小不拘。因为圣诞袜是要用来装礼物的，所以是小朋友最喜欢的东西，晚上他们会将自己的袜子挂在床边，等待第二天早上收礼；圣诞帽，是一顶红色帽子，据说晚上戴上睡觉除了睡得安稳和有点暖外，第二天还会发现在帽子里多了点心爱的人送的礼物；圣诞树，通常人们在圣诞前后把一棵常绿植物（如松树）弄进屋里或者放在户外，用圣诞灯和彩色的装饰物装饰，并把一个天使或星星置于树顶，圣诞树起源于德国；圣诞节环，西方国家圣诞节期间挂在家门口用的装饰品，通常用绿色的枝叶或藤条（松毛、松针等）和银色的金属及金色的铃铛配以红色的缎带组成主色调，以绿、白、黄、红四色代表欢乐喜庆，上面还写有MERRY CHRISTMAS或简写为X'mas的字样，圣诞节环最早出现在芬兰。
一年一度的圣诞节就要到了，最近大家都还在坚持学习吗？本人昨天也不幸杨过了，今天满血复活，是什么给了我这么大的动力？我想应该是学习！今天趁着圣诞节到来之前，送大家一颗吉祥的圣诞树，愿所有的朋友都能健健康康，平平安安的挺过这最艰难的时刻！
💖 效果展示
💖 代码分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/domtree.css">
<style>
body{
background-color: black;
}
#c{
width: 1080px;
height: 1080px;
}
</style>
</head>
<body>
<canvas id="c">
<script>
var collapsed = true;
function toggle() {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
if (collapsed) {
fs.rows = '30px,*';
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;
}
</script>
<script>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</script>
<script>
M = Math;
Q = M.random; J = [];
U = 14;
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 ? 100 : W = 450;
with (getContext('2d'))
if (k > 10 | !k)
for (
font = '60px Impact',
V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V + '305,305,315,.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
('Marry Christmas!', U, 360);
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>
</canvas>
</body>
</html>
💖 知识点睛
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
坐标实例
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。
Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 "ink" 的方法，就像stroke().
实例
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:
Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
- drawImage(image,x,y)