# 圣诞快到了，用JavaScript画一个圣诞树

2021-12-22 09:06:42  阅读：176  来源： 互联网

# 实现过程

## 1、先来画一棵树

### 实现代码

HTML部分：

``````<div id="box1">
<div id="box2">
<!--记得设置画布的宽高-->
<canvas id="canvas" width="1300" height="800">
啊哦，您的浏览器不支持画布......
</canvas>
</div>
</div>``````

JavaScript部分：

``````        var canvas = document.getElementById('canvas');
drawTree();
function drawTree(){
if(!canvas.getContext) return;
var ctx1 = canvas.getContext('2d');
// 树最上层
ctx1.beginPath();
//这为了能看清楚线条把lightgreen改成了green，下面都将用浅绿色作线条
ctx1.strokeStyle = 'green';
ctx1.lineWidth = 1;
ctx1.moveTo(450,200);
ctx1.lineTo(470,200);
ctx1.arc(496,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(548,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(600,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(652,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(704,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.lineTo(750,200);
ctx1.lineTo(600,50);
ctx1.lineTo(450,200);

ctx1.stroke();

//树第二层
ctx1.beginPath();
ctx1.moveTo(470,200);
ctx1.lineTo(320,350);
ctx1.lineTo(340,350);
ctx1.arc(366,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(418,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(470,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(522,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(574,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(626,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(678,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(730,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(782,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(834,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.lineTo(880,350);
ctx1.lineTo(730,200);

ctx1.stroke();

//树第三层
ctx1.beginPath();
ctx1.moveTo(340,350);
ctx1.lineTo(190,500);
ctx1.lineTo(210,500);
ctx1.arc(236,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(288,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(340,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(392,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(444,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(496,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(548,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(600,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(652,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(704,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(756,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(808,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(860,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(912,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(964,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.lineTo(1010,500);
ctx1.lineTo(860,350);

ctx1.stroke();

//树干
ctx1.beginPath();
ctx1.moveTo(525,500);
ctx1.lineTo(525,740);
ctx1.lineTo(675,740);
ctx1.lineTo(675,500);

ctx1.stroke();``````

## 2、给这棵树上色

### 实现代码

HTML部分

``````<div id="box1">
<div id="box2">
<canvas id="canvas" width="1300" height="800">
啊哦，您的浏览器不支持画布......
</canvas>
</div>
</div>``````

JavaScript部分

``````        var canvas = document.getElementById('canvas');
drawTree();
function drawTree(){
if(!canvas.getContext) return;
var ctx1 = canvas.getContext('2d');
// 树最上层
ctx1.beginPath();
//ctx1.strokeStyle = 'green';
//ctx1.lineWidth = 1;
ctx1.moveTo(450,200);
ctx1.lineTo(470,200);
ctx1.arc(496,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(548,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(600,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(652,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(704,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.lineTo(750,200);
ctx1.lineTo(600,50);
ctx1.lineTo(450,200);

/*这里把ctx1.stroke();注释掉了，因为我们这里实现了渐变色，
加上线条的话渐变效果就不那么好看了*/

//以下是实现树的第一层渐变色填充效果
//添加颜色
//填充渐变色
ctx1.fill();
// ctx1.stroke();

//树第二层
ctx1.beginPath();
ctx1.moveTo(470,200);
ctx1.lineTo(320,350);
ctx1.lineTo(340,350);
ctx1.arc(366,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(418,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(470,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(522,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(574,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(626,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(678,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(730,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(782,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(834,365,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.lineTo(880,350);
ctx1.lineTo(730,200);

//这里我们发现多画了几个弧，而且这几个弧对应的就是树第一层我们所画的弧的反向画法
//这是为什么呢？
//因为涉及到填色，我们得让我们所画的第二层树与第一层树的底部形成一个闭合路径
//所以再反向画一遍第一层的弧形就可以了
ctx1.arc(704,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(652,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(600,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(548,215,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(496,215,30,7/6*Math.PI,11*Math.PI/6,false);

//以下是实现树的第二层渐变色填充效果
//添加颜色
//填充渐变色
ctx1.fill();
// ctx1.stroke();

//树第三层
ctx1.beginPath();
ctx1.moveTo(340,350);
ctx1.lineTo(190,500);
ctx1.lineTo(210,500);
ctx1.arc(236,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(288,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(340,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(392,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(444,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(496,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(548,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(600,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(652,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(704,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(756,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(808,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(860,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(912,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(964,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.lineTo(1010,500);
ctx1.lineTo(860,350);

//这里画的弧和第二层后面画的弧原理一样
ctx1.arc(834,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(782,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(730,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(678,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(626,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(574,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(522,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(470,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(418,365,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(366,365,30,11*Math.PI/6,7/6*Math.PI,true);

//以下是实现树的第三层渐变色填充效果
//添加三种颜色
//填充渐变色
ctx1.fill();
// ctx1.stroke();

//树干
ctx1.beginPath();
ctx1.moveTo(525,500);
ctx1.lineTo(525,740);
ctx1.lineTo(675,740);
ctx1.lineTo(675,500);

//画这几个弧也是为了形成闭合回路
ctx1.arc(548,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(600,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.arc(652,515,30,7/6*Math.PI,11*Math.PI/6,false);
ctx1.fillStyle = 'Sienna';
ctx1.fill();

//这块就是为了好看才加了这一块的颜色，也许并不好看？
ctx1.beginPath();
ctx1.moveTo(548,500);
ctx1.lineTo(548,740);
ctx1.lineTo(652,740);
ctx1.lineTo(652,500);
ctx1.arc(652,515,30,3*Math.PI/2,7/6*Math.PI,true);
ctx1.arc(600,515,30,11*Math.PI/6,7/6*Math.PI,true);
ctx1.arc(548,515,30,11*Math.PI/6,3/2*Math.PI,true);
ctx1.fill();``````

## 3、树顶画一个星星

### 实现代码

HTML代码和JavaScript代码就是第2步的代码，这里就只放画布画五角星的代码。

canvas画五角星JavaScript代码如下：

``````//树顶五角星
ctx1.beginPath();
ctx1.moveTo(600,5);
ctx1.lineTo(568,100);
ctx1.lineTo(650,40);
ctx1.lineTo(550,40);
ctx1.lineTo(632,100);
ctx1.closePath();
ctx1.fillStyle = 'gold';
ctx1.fill();``````

## 4、再来两根彩带

### 实现代码

canvas画彩带JavaScript代码如下：

``````//树上彩带1
ctx1.beginPath();
ctx1.strokeStyle = 'white';
ctx1.lineWidth = 5;
ctx1.arc(700,-150,450,10.05*Math.PI/24,16.55*Math.PI/24,false);
ctx1.stroke();

//树上彩带2
ctx1.beginPath();
ctx1.strokeStyle = 'white';
ctx1.lineWidth = 5;
ctx1.arc(440,-150,600,6.56*Math.PI/24,14.24*Math.PI/24,false);
ctx1.stroke();``````

## 5、加一点点细节

### 实现代码

CSS部分

``````<style>
body{
background-color: rgb(179, 223, 250);
overflow: hidden;
}
#box1{
position: relative;
/*设置成不可选择*/
user-select: none;
}
#box2{
/* margin-left: 160px; */
position: relative;
}
@font-face {
font-family: MerryChristmasFlake-1;
src: url(../ziti/MerryChristmasFlake-1.ttf);
}
@font-face {
font-family: MerryChristmasStar-2;
src: url(../ziti/MerryChristmasStar-2.ttf);
}
@font-face {
font-family: Christmas-Time-Personal-Use-1;
src: url(../ziti/Christmas-Time-Personal-Use-1.ttf);
}
@font-face {
font-family: Candcu-1;
src: url(../ziti/Candcu-1.ttf);
}
canvas{
z-index: -1;
}
#box1-2{
position: absolute;
top: 100px;
left: 850px;
font-family: MerryChristmasStar-2;
/* font-family: MerryChristmasFlake-1; */
user-select: none;
font-size: 130px;
font-weight: lighter;
color: white;
z-index: 999;
}
/* 小铃铛 */
#box3{
position: absolute;
top: 255px;
left: 600px;
font-family: Christmas-Time-Personal-Use-1;
font-size: 80px;
color: red;
}
/* 包袱 */
#box4{
position: absolute;
top: 390px;
left: 650px;
font-family: MerryChristmasFlake-1;
font-size: 380px;
color: rgb(100, 69, 51);
}
/* 礼物盒 */
#box5{
position: absolute;
top: 570px;
left: 870px;
font-family: MerryChristmasFlake-1;
font-size: 180px;
color: green;
}
/* 姜饼人 */
#box6{
position: absolute;
top: 160px;
left: 450px;
font-family: MerryChristmasFlake-1;
font-size: 150px;
color: gold;
}
/* 小铃 */
#box7{
position: absolute;
top: 295px;
left: 800px;
font-family: MerryChristmasFlake-1;
font-size: 60px;
color: gold;
}
/* 小礼物盒 */
#box8{
position: absolute;
top: 350px;
left: 690px;
font-family: MerryChristmasFlake-1;
font-size: 80px;
color: red;
}
/* 小布袋 */
#box9{
position: absolute;
top: 380px;
left: 560px;
font-family: Christmas-Time-Personal-Use-1;
font-size: 100px;
color: gold;
}
/* 小星星 */
#box10{
position: absolute;
top: 405px;
left: 280px;
font-family: Christmas-Time-Personal-Use-1;
font-size: 60px;
color: gold;
}
/* J */
#box11{
position: absolute;
top: 535px;
left: 400px;
font-family: Candcu-1;
font-size: 260px;
color: green;
}
/* 小爱心 */
#box12{
position: absolute;
top: 400px;
left: 420px;
font-family: MerryChristmasFlake-1;
font-size: 80px;
color: red;
}
/* 小星星 */
#box13{
position: absolute;
top: 250px;
left: 730px;
font-family: MerryChristmasFlake-1;
font-size: 80px;
font-weight: bolder;
color: gold;
}
</style>``````

HTML部分

``````    <div id="box1">
<div id="box2">
<canvas id="canvas" width="1300" height="800">
啊哦，您的浏览器不支持画布......
</canvas>
<div id="box3">
0
</div>
<div id="box4">
5
</div>
<div id="box5">
4
</div>
<div id="box6">
2
</div>
<div id="box7">
3
</div>
<div id="box8">
4
</div>
<div id="box9">
6
</div>
<div id="box10">
5
</div>
<div id="box11">
J
</div>
<div id="box12">
9
</div>
<div id="box13">
8
</div>
</div>
<div id="box1-2">
MerryChristmas
</div>
</div>``````

JavaScript部分

JavaScript部分就是上面那些汇总一下链接到HTML中就可以用啦