从像素到灵魂：用 DOM 绘制一只跃然纸上的虚拟兔子

2024-01-24 12:34:28

前言

DOM（文档对象模型）是一种强大的工具，它允许我们与网页的内容和结构进行交互。通过操纵 DOM 元素，我们可以创建动态和引人入胜的网页。本文将指导你踏上用 DOM 绘制一只栩栩如生的兔子的旅程，在这个过程中，你将探索 DOM 编程的奥秘，并掌握图形绘制的基本原理。

准备工作

在开始绘制兔子之前，你需要准备一些东西：

文本编辑器或 IDE： 用于编写和编辑代码。
网络浏览器： 用于预览结果。
基本 JavaScript 知识： 包括 DOM 元素、事件处理和画布绘制。

绘制兔子

我们从绘制兔子的身体开始，它是一个椭圆形：

const body = document.createElement('div');
body.style.width = '100px';
body.style.height = '50px';
body.style.borderRadius = '50%';
body.style.backgroundColor = 'white';

下一步是绘制兔子的耳朵，两个三角形：

const ear1 = document.createElement('div');
ear1.style.width = '30px';
ear1.style.height = '50px';
ear1.style.transform = 'rotate(-45deg)';
ear1.style.backgroundColor = 'white';

const ear2 = document.createElement('div');
ear2.style.width = '30px';
ear2.style.height = '50px';
ear2.style.transform = 'rotate(45deg)';
ear2.style.backgroundColor = 'white';

现在，是时候绘制兔子的眼睛了，两个圆圈：

const eye1 = document.createElement('div');
eye1.style.width = '10px';
eye1.style.height = '10px';
eye1.style.borderRadius = '50%';
eye1.style.backgroundColor = 'black';

const eye2 = document.createElement('div');
eye2.style.width = '10px';
eye2.style.height = '10px';
eye2.style.borderRadius = '50%';
eye2.style.backgroundColor = 'black';

最后，我们为兔子添加一个鼻子，一个三角形：

const nose = document.createElement('div');
nose.style.width = '10px';
nose.style.height = '10px';
nose.style.transform = 'rotate(-45deg)';
nose.style.backgroundColor = 'pink';

将所有这些元素组合在一起，我们就得到了一个用 DOM 元素绘制的兔子：

body.appendChild(ear1);
body.appendChild(ear2);
body.appendChild(eye1);
body.appendChild(eye2);
body.appendChild(nose);

赋予兔子生命

现在，我们的兔子已经成形，但它还是静止的。为了赋予它生命，我们可以使用 CSS 动画：

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

body {
  animation: jump 2s infinite;
}