ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

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

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

标签：11 30 JavaScript arc 圣诞 圣诞树 ctx1 PI Math


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

实现效果

实现过程

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有