JavaScript中秋快乐！

我们来实现一个简单的祝福网页~

主要的难度在于使用canvas绘图

当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：

初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。

function onCanvasClick(){  //事件处理函数
    context.clearRect(0, 0, canvas1.width, canvas1.height);
    
    
    setTimeout(onTimeout,1000)
    setInterval(createLantern, 1437); // 每隔0.1秒生成一个新的灯笼
    //移除事件侦听
    canvas1.onclick=null;
}

function onTimeout(){
    // drawTips("中秋节快乐", "yellow", 1, "red", 3);
    
    drawTipsSequentially('中秋节快乐', 'red', true, 'black', 2, 150);
    // putColorOnPath(false,'red',10);
}

function onKeydown(e){
    if(e.keyCode===13){
        onCanvasClick();
        windown.onkeydown=null;
    }
}

function init(){
    drawTips(START_TEXT, "blue");
    canvas1.onclick=onCanvasClick;  //注册鼠标的click事件侦听
    window.onkeydown=onKeydown;  //注册键盘的keydown事件侦听
}

init();

然后完成灯笼和canvas的函数：

这部分内容在之前已经有涉及到，贴上代码：

function drawLine(xs,ys,xe,ye,style){
    context.beginPath();
    context.moveTo(xs,ys);
    context.lineTo(xe,ye);
    context.strokeStyle=style;
    context.stroke();
}


function drawBg(margin,color){
    let horizontalNums=canvas1.height/margin;
    let verticalNums=canvas1.width/margin;
    for(let i=1;i<=horizontalNums;i++){
        drawLine(0, i*margin, canvas1.width, i*margin, color);
    }

    for(let i=1;i<=verticalNums;i++){
        drawLine(i*margin, 0, i*margin, canvas1.height, color);
    }
}


function drawTips(tip, fillColor, isStroke, strokeColor, strokeWidth){
    text.text = tip;
    text.x = canvas1.width/2;
    text.y = canvas1.height/2;
    text.fontSize = 80;
    text.style = fillColor;
    drawText(text,1);
    if (isStroke){
        text.style = strokeColor;
        drawText(text,0,strokeWidth);
    }
}


function createLantern() {
    const lantern = document.createElement('div');
    lantern.classList.add('lantern');

    const img = document.createElement('img');
    img.src = '../../image/dengLong.png'; // 灯笼图片路径
    lantern.appendChild(img);

    // 设置随机位置和动画时间
    lantern.style.left = Math.random() * 100 + '%'; // 随机水平位置
    // lantern.style.animationDuration = Math.random() * 5 +  + 's'; // 随机动画时长

    document.body.appendChild(lantern);

    // 移除灯笼，当其动画结束后
    setTimeout(() => {
        lantern.remove();
    }, 50000); // 根据动画持续时间移除
}


function drawText(text, isfill, strokeWidth) {
    context.font = text.fontSize + 'px sans-serif';
    context.textAlign = text.align;
    context.textBaseline = text.baseline;

    if (isfill) {
        context.fillStyle = text.style;
        context.fillText(text.text, text.x, text.y);
    } else {
        context.strokeStyle = text.style;
        context.lineWidth = strokeWidth;
        context.strokeText(text.text, text.x, text.y);
    }
}


function drawTipsSequentially(tip, fillColor, isStroke, strokeColor, strokeWidth, interval) {
    let currentIndex = 0;
    const tipLength = tip.length;
    const displayText = { ...text, text: '' };  // 复制text对象

    function drawNextCharacter() {
        if (currentIndex <= tipLength) {
            // 清除之前绘制的文本
            context.clearRect(0, 0, canvas1.width, canvas1.height);
            // 获取当前要显示的部分文本
            displayText.text = tip.substring(0, currentIndex);

            // 设置文本绘制参数
            displayText.x = canvas1.width / 2;
            displayText.y = canvas1.height / 2;
            displayText.fontSize = 80;
            displayText.style = fillColor;
            drawText(displayText, 1);

            if (isStroke) {
                displayText.style = strokeColor;
                drawText(displayText, 0, strokeWidth);
            }

            // 增加字符索引
            currentIndex++;
        } else {
            clearInterval(intervalId); // 当显示完整句话时，停止动画
            drawBg(10,'rgba(0,0,255,0.1)')
        }
    }

    // 每隔指定的时间绘制下一个字符
    const intervalId = setInterval(drawNextCharacter, interval);
    
}

一些基础设置：

let canvas1=document.getElementById("myCanvas");
let context=canvas1.getContext('2d');
const START_TEXT = "点击查收礼物！"

let text={
    fontSize:64,
    align:'center',
    baseline:'middle',
    style:'red',
    text:'',
    x:0,
    y:0
};

let circle = {
    x:canvas1.width/2,
    y:canvas1.height/2,
    r:10,
    sAngle:0,
    eAngle:Math.PI*2,
    clockwise:false
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋快乐</title>
    <link rel="stylesheet" href="/css/lab1.css">

</head>
<body>
    <div class="outer">
        <canvas id="myCanvas" width="800" height="200"></canvas>
    </div>

    <div class="lantern">
        <img src="../image/dengLong.png" alt="lantern">
    </div>

    <script src="js/public.js"></script>
    <script src="js/functions.js"></script>
    <script src="js/settings.js"></script>
    <!-- 主程序需要引用别的函数、变量等，放在最后 -->
    <script src="js/lab1.js"></script>
</body>
</html>

CSS样式：

body {
    background-image: url('../image/zhongqiu.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    position: relative; 
    overflow: hidden;
}

.outer {
    padding: 20px;
    position: relative; 
    z-index: 1;
    background: transparent; 
}

canvas {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    margin: 500px auto; 
    display: block;
    position: relative;
    z-index: 2;
    background: transparent;
}



.lantern {
    position: absolute;
    bottom: -100px; 
    left: 50%; 
    transform: translateX(-50%); 
    animation: rise-up 10s linear infinite; 
}

.lantern img {
    width: 100px; 
}


@keyframes rise-up {
    0% {
        bottom: -100px; 
        opacity: 0; 
    }
    10% {
        opacity: 1; 
    }
    90% {
        opacity: 1; 
    }
    100% {
        bottom: 110%; 
        opacity: 0; 
    }
}

素材都是网上找的~

最后祝大家中秋节快乐！