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

实现效果

实现过程

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

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

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

标签：11,30,JavaScript,arc,圣诞,圣诞树,ctx1,PI,Math
来源： https://blog.csdn.net/zg0601/article/details/122074208