圣诞树上绘制五角星js代码分析

// JavaScript Document
var ctx = document.getElementById("cav");
var cav = ctx.getContext("2d");
//x,y为五角星最左边定点坐标，n为五角星的缩小倍数，c为五角星的填充颜色
function draw(x, y, n, c) {
    cav.beginPath();
    cav.fillStyle = c;
    cav.moveTo(x / n, y / n);//moveTo方法绘制起点(x/n,y/n)
    //lineTo方法绘制从上一个顶点到((x+50)/n,y/n)顶点的路径
    cav.lineTo((x + 50) / n, y / n);
    cav.lineTo((x + 10) / n, (y + 30) / n);
    cav.lineTo((x + 25) / n, (y - 20) / n);
    cav.lineTo((x + 40) / n, (y + 30) / n);
    cav.closePath();//将终点与起点连接已形成闭合路径
    cav.fill();//绘制填充图形
}
function hug() {
    draw(160, 86, 0.7, '#ff0'); //第一棵树的树顶大五角星
    draw(487, 86, 0.7, '#ff0'); //第二棵树的树顶大五角星
    draw(357, 286, 1.3, '#0ff'); //第一棵树的其它小的五角星
    draw(320, 386, 1.5, '#f0f');
    draw(600, 566, 2.0, '#eca9f2');
    draw(500, 666, 2.0, '#eca9f2');
    draw(1050, 286, 1.5, '#e0f084'); //第二棵树挂的小五角星
    draw(1500, 486, 2.0, '#fe6869');
    draw(1700, 686, 2.5, '#88c7ef');
    draw(2550, 1000, 3.5, '#fff589');
    draw(1150, 450, 1.5, '#ebcd97');
    draw(2490, 1250, 3.5, '#f5d1ff');
}
function show() {//点击按钮隐藏或显示五角星
    //如果canvas状态为显示，则将其隐藏。反之，则让其显示
    if (ctx.style.display == "block") {
        ctx.style.display = "none";
    }
    else {
        ctx.style.display = "block";
        hug();
    }
}
cav.closePath()

代码整体功能

这段代码用于在Canvas上绘制多个彩色五角星，并控制其显示/隐藏。

初始化

var ctx = document.getElementById("cav");  // 获取canvas元素
var cav = ctx.getContext("2d");             // 获取2D绘图上下文

绘制单个五角星

function draw(x, y, n, c) {
    cav.beginPath();                         // 开始新路径
    cav.fillStyle = c;                        // 设置填充颜色
    
    cav.moveTo(x / n, y / n);                 // ① 起点：最左边顶点
    cav.lineTo((x + 50) / n, y / n);           // ② 右上顶点
    cav.lineTo((x + 10) / n, (y + 30) / n);    // ③ 左下内点
    cav.lineTo((x + 25) / n, (y - 20) / n);    // ④ 顶部尖角
    cav.lineTo((x + 40) / n, (y + 30) / n);    // ⑤ 右下内点
    cav.closePath();                           // ⑥ 闭合回起点
    
    cav.fill();                                // 填充颜色
}

参数说明：

• x, y：五角星最左边顶点坐标

• n：缩小倍数（n越大，星星越小）

• c：填充颜色

批量绘制所有星星

function hug() {
    // 树顶大星星（n小，尺寸大）
    draw(160, 86, 0.7, '#ff0');   // 第一棵树顶
    draw(487, 86, 0.7, '#ff0');   // 第二棵树顶
    
    // 树上装饰的小星星（n大，尺寸小）
    draw(357, 286, 1.3, '#0ff');   // 青色
    draw(320, 386, 1.5, '#f0f');   // 品红
    draw(600, 566, 2.0, '#eca9f2');// 浅紫
    draw(500, 666, 2.0, '#eca9f2');
    draw(1050, 286, 1.5, '#e0f084');// 浅绿
    draw(1500, 486, 2.0, '#fe6869');// 珊瑚红
    draw(1700, 686, 2.5, '#88c7ef');// 天蓝
    draw(2550, 1000, 3.5, '#fff589');// 淡黄
    draw(1150, 450, 1.5, '#ebcd97');// 香槟金
    draw(2490, 1250, 3.5, '#f5d1ff');// 粉紫
}

显示/隐藏控制

function show() {
    if (ctx.style.display == "block") {  // 如果当前显示
        ctx.style.display = "none";       // 则隐藏
    } else {                              // 如果当前隐藏
        ctx.style.display = "block";       // 则显示
        hug();                             // 重新绘制星星
    }
}

问题代码

cav.closePath()  // 位置错误，在函数外执行无意义

核心逻辑：通过5个点连接成五边形，配合颜色填充，形成五角星造型。n参数控制大小，hug()批量绘制，show()切换可见性。