返回

GitHub 章鱼猫:Zdog 速成指南

前端

构建头部

章鱼猫的头部是一个圆形,我们可以通过 Zdog 的 Ellipse 类来创建它。首先,我们需要创建一个新的 Ellipse 对象,并设置其半径和颜色。

const head = new Zdog.Ellipse({
  diameter: 100,
  color: '#ff0000',
});

接下来,我们需要将头部添加到场景中。为此,我们可以使用 addTo 方法。

head.addTo(zdog);

创建脸部

章鱼猫的脸部是一个圆形,我们可以使用与头部相同的代码来创建它。不同之处在于,我们需要将脸部的颜色设置为白色。

const face = new Zdog.Ellipse({
  diameter: 80,
  color: '#ffffff',
});

face.addTo(head);

添加眼睛

章鱼猫的眼睛是两个圆形,我们可以使用与头部相同的代码来创建它们。不同之处在于,我们需要将眼睛的颜色设置为黑色。

const leftEye = new Zdog.Ellipse({
  diameter: 10,
  color: '#000000',
});

leftEye.addTo(face);

const rightEye = new Zdog.Ellipse({
  diameter: 10,
  color: '#000000',
});

rightEye.addTo(face);

创建鼻子

章鱼猫的鼻子是一个三角形,我们可以使用 Zdog 的 Shape 类来创建它。首先,我们需要创建一个新的 Shape 对象,并设置其形状和颜色。

const nose = new Zdog.Shape({
  path: [
    { x: -10, y: 0 },
    { x: 10, y: 0 },
    { x: 0, y: 20 },
  ],
  color: '#000000',
});

nose.addTo(face);

添加嘴巴

章鱼猫的嘴巴是一个弧形,我们可以使用 Zdog 的 Arc 类来创建它。首先,我们需要创建一个新的 Arc 对象,并设置其半径、角度和颜色。

const mouth = new Zdog.Arc({
  radius: 20,
  startAngle: -Math.PI / 2,
  endAngle: Math.PI / 2,
  color: '#000000',
});

mouth.addTo(face);

创建胡须

章鱼猫的胡须是几根线段,我们可以使用 Zdog 的 Line 类来创建它们。首先,我们需要创建一个新的 Line 对象,并设置其起点、终点和颜色。

const leftWhisker1 = new Zdog.Line({
  start: { x: -20, y: 0 },
  end: { x: -30, y: 10 },
  color: '#000000',
});

leftWhisker1.addTo(face);

const leftWhisker2 = new Zdog.Line({
  start: { x: -20, y: 0 },
  end: { x: -30, y: -10 },
  color: '#000000',
});

leftWhisker2.addTo(face);

const rightWhisker1 = new Zdog.Line({
  start: { x: 20, y: 0 },
  end: { x: 30, y: 10 },
  color: '#000000',
});

rightWhisker1.addTo(face);

const rightWhisker2 = new Zdog.Line({
  start: { x: 20, y: 0 },
  end: { x: 30, y: -10 },
  color: '#000000',
});

rightWhisker2.addTo(face);

添加耳朵

章鱼猫的耳朵是两个圆形,我们可以使用与头部相同的代码来创建它们。不同之处在于,我们需要将耳朵的颜色设置为灰色。

const leftEar = new Zdog.Ellipse({
  diameter: 10,
  color: '#808080',
});

leftEar.addTo(head);

const rightEar = new Zdog.Ellipse({
  diameter: 10,
  color: '#808080',
});

rightEar.addTo(head);

渲染场景

最后,我们需要渲染场景。为此,我们可以使用 renderGraph 方法。

zdog.renderGraph();

现在,你就可以看到一个 GitHub 章鱼猫了!