圣诞快到了，送给大家一棵圣诞树~
实现效果
实现过程
1、先来画一棵树
开始的大致思路就是利用 canvas画布 功能绘制圣诞树，自己先在草稿纸上画了一个简单的圣诞树，然后用画布功能尝试实现。
实现效果
实现代码
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();注释掉了，因为我们这里实现了渐变色，
加上线条的话渐变效果就不那么好看了*/
//以下是实现树的第一层渐变色填充效果
var gradient1 = ctx1.createLinearGradient(600, 50, 600, 200);
//添加颜色
gradient1.addColorStop(0, "lightgreen");
gradient1.addColorStop(0.3, "lightgreen");
gradient1.addColorStop(0.8, "green");
gradient1.addColorStop(1, "darkgreen");
//填充渐变色
ctx1.fillStyle = gradient1;
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);
//以下是实现树的第二层渐变色填充效果
var gradient2 = ctx1.createLinearGradient(600, 185, 600, 350);
//添加颜色
gradient2.addColorStop(0, "lightgreen");
gradient2.addColorStop(0.2, "lightgreen");
gradient2.addColorStop(0.8, "green");
gradient2.addColorStop(1, "darkgreen");
//填充渐变色
ctx1.fillStyle = gradient2;
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);
//以下是实现树的第三层渐变色填充效果
var gradient3 = ctx1.createLinearGradient(600, 335, 600, 500);
//添加三种颜色
gradient3.addColorStop(0, "lightgreen");
// gradient3.addColorStop(0.2, "green");
gradient3.addColorStop(0.6, "green");
gradient3.addColorStop(1, "darkgreen");
//填充渐变色
ctx1.fillStyle = gradient3;
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 = 'SaddleBrown';
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.fillStyle = 'SaddleBrown';
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部分
为什么需要CSS样式呢？因为咱偷懒了，找的圣诞主题字体真香，HTML盒子中除了MerryChristmas用到了下载的字体，后面盒子中那些数字实现效果其实是圣诞主题小物件，真好用......
<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中就可以用啦
送你一棵圣诞树，提前祝你圣诞快乐！
湖南还没有降温，更别提下雪了，改天让界面飘点雪，更有圣诞气氛