用html写一个爱心树表白动画

作者：我家自动化 | 2024-02-20 19:04:26

踩

html代码之爱心树表白


<p>好的，以下是用 HTML 写的一个爱心树表白动画的示例：</p>
<p>```
<!DOCTYPE html></p>
<html>
<head>
  <style>
    /* 设置画布的样式 */
    canvas {
      border: 1px solid #ddd;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    // 获取 canvas 元素
    var canvas = document.getElementById("myCanvas");
    // 获取 canvas 的上下文
    var ctx = canvas.getContext("2d");
 
<pre><code>// 画爱心树的函数
function drawLoveTree() {
  // 绘制爱心树的身体
  ctx.beginPath();
  ctx.moveTo(200, 50);
  ctx.lineTo(150, 250);
  ctx.lineTo(250, 250);
  ctx.lineTo(200, 50);
  ctx.closePath();
  ctx.fillStyle = &quot;green&quot;;
  ctx.fill();
 
  // 绘制爱心树的叶子
  for (var i = 0; i &lt; 10; i++) {
    ctx.beginPath();
    ctx.arc(50 + i * 25, 50 + i * 25, 10 + i * 5, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = &quot;green&quot;;
    ctx.fill();
  }
 
  // 绘制爱心树的树干
  ctx.beginPath();
  ctx.moveTo(200, 50);
  ctx.lineTo(200, 250);
  ctx.closePath();
  ctx.strokeStyle = &quot;brown&quot;;
  ctx.lineWidth = 10;
  ctx.stroke();
 
  // 绘制爱心树的树叶
  ctx.beginPath();
  ctx.moveTo(180, 100);
  ctx.lineTo(220, 100);
  ctx.lineTo(200, 75);
  ctx.closePath();
  ctx.fillStyle = &quot;green&quot;;
  ctx.fill();
}
 
// 循环绘制爱心树
setInterval(function () {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  drawLoveTree(); // 绘制爱心树
}, 500); // 每 500 毫秒执行一次
 
// 绘制爱心树上方的文字
</code></pre>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/120656