用HTML5 + JavaScript绘制花、树

学习&实践爱好者

已于 2024-02-12 07:30:37 修改

阅读量3.5k

点赞数 24

文章标签： html5 javascript

于 2024-02-12 07:23:32 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/136068793

版权

用HTML5 + JavaScript绘制花、树

<canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。

<canvas> 标签/元素只是图形容器，必须使用脚本来绘制图形。

HTML5 canvas 图形标签基础https://blog.csdn.net/cnds123/article/details/112916903

下面展示了如何使用 HTML5 的 <canvas> 标签/元素以及 JavaScript 来绘制花、树等效果。

一、画花

花1、先给出运行效果图：

源码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Canvas绘制花朵</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>

  <script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 绘制花朵：花朵中心的x坐标；花朵中心的y坐标；radius花朵的半径；petalCount花瓣的数量；petalColor花瓣的颜色；centerColor花朵中心的颜色
    function drawFlower(x, y, petalCount, petalColor, centerColor) {
      // 绘制花朵的中心
      context.beginPath();
      context.arc(x, y, 10, 0, Math.PI * 2, true);
      context.fillStyle = centerColor;
      context.fill();

      var angle = (Math.PI * 2) / petalCount;
      for (var i = 0; i < petalCount; i++) {
        context.beginPath();
        var startX = x + Math.cos(angle * i) * 10;
        var startY = y + Math.sin(angle * i) * 10;
        var cp1X = x + Math.co