圣诞快到了，送给大家一棵圣诞树~

实现效果

实现过程

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中就可以用啦

送你一棵圣诞树，提前祝你圣诞快乐！

湖南还没有降温，更别提下雪了，改天让界面飘点雪，更有圣诞气氛

圣诞快到了，用JavaScript画一个圣诞树相关推荐

c语言字母圣诞树,如何用C语言画一个“圣诞树”.pdf
如如何何用用C语语言言画画一一个个"圣圣诞诞树树" 如何用C语言画一个"圣诞树",我使用了左右镜像的Sierpinski triangle,每层减去上方一小块, ...
使用canvas和JavaScript画一个阴阳图
主要函数: 函数名用法说明 arc() Canvas.arc(0,0,20,0,2*Math.PI,false);arc参数:坐标点,半径,起始角度,结束角度,逆时针(默认). 画圆 stroke ...
使用java画一个圣诞树
为了画一棵圣诞树,首先需要准备一个画布,可以使用 java.awt.Canvas 类或者 javax.swing.JComponent 类.然后使用 java.awt.Graphics 类中的方法来进 ...
圣诞节！教你用Python画棵圣诞树
作者 | 糖甜甜甜,985高校经管研二,擅长用 Python.R.tableau 等工具结合统计学和机器学习模型做数据分析. 来源 | 经管人学数据分析(ID:DAT-2017) 如何用Python画 ...
简单python画圣诞树图片-圣诞节！教你用 Python 画棵圣诞树
原标题:圣诞节!教你用 Python 画棵圣诞树作者 | 糖甜甜甜责编 | 胡巍巍如何用Python画一个圣诞树呢? 最简单: 1height = 5 2 3stars = 1 4for i i ...
python画圣诞树代码-圣诞节！教你用Python画棵圣诞树
原标题:圣诞节!教你用Python画棵圣诞树 | 作者:糖糖甜甜 | 来源:经管人学数据分析(ID:DAT-2017) | 欢迎转载,请注明出处. 如何用python画一个圣诞树呢? 最简单: 1he ...
python turtle画圣诞树动图_圣诞节！教你用Python画棵圣诞树
作者 | 糖甜甜甜,985高校经管研二,擅长用 Python.R.tableau 等工具结合统计学和机器学习模型做数据分析. 如何用Python画一个圣诞树呢? 最简单: 1height =5 2 3 ...
用python画圣诞树-圣诞节！教你用 Python 画棵圣诞树
原标题:圣诞节!教你用 Python 画棵圣诞树作者 | 糖甜甜甜责编 | 胡巍巍如何用Python画一个圣诞树呢? 最简单: 1height = 5 2 3stars = 1 4for i i ...
圣诞节！教你用 Python 画棵圣诞树
作者 | 糖甜甜甜责编 | 胡巍巍如何用Python画一个圣诞树呢? 最简单: 1height = 5 2 3stars = 1 4for i in range(height): 5 pri ...

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

实现效果

实现过程

1、先来画一棵树

实现效果

实现代码

2、给这棵树上色

实现效果

实现代码

3、树顶画一个星星

实现效果

实现代码

4、再来两根彩带

实现效果

实现代码

5、加一点点细节

实现效果

实现代码

圣诞快到了，用JavaScript画一个圣诞树相关推荐

最新文章

热门文章