devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用HTML5 + JavaScript绘制花、树_html画一朵花

作者：weixin_40725706 | 2024-02-16 18:04:34

赞

踩

html画一朵花

用HTML5 + JavaScript绘制花、树

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

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

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

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

一、画花

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

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Canvas绘制花朵</title>
  5.   <style>
  6.     canvas {
  7.       border: 1px solid black;
  8.     }
  9.   </style>
  10. </head>
  11. <body>
  12.   <canvas id="myCanvas" width="400" height="400"></canvas>
  13.  
  14.   <script>
  15.     var canvas = document.getElementById("myCanvas");
  16.     var context = canvas.getContext("2d");
  17.  
  18.     // 绘制花朵：花朵中心的x坐标；花朵中心的y坐标；radius花朵的半径；petalCount花瓣的数量；petalColor花瓣的颜色；centerColor花朵中心的颜色
  19.     function drawFlower(x, y, petalCount, petalColor, centerColor) {
  20.       // 绘制花朵的中心
  21.       context.beginPath();
  22.       context.arc(x, y, 10, 0, Math.PI * 2, true);
  23.       context.fillStyle = centerColor;
  24.       context.fill();
  25.  
  26.       var angle = (Math.PI * 2) / petalCount;
  27.       for (var i = 0; i < petalCount; i++) {
  28.         context.beginPath();
  29.         var startX = x + Math.cos(angle * i) * 10;
  30.         var startY = y + Math.sin(angle * i) * 10;
  31.         var cp1X = x + Math.cos(angle * i - angle / 4) * 50;
  32.         var cp1Y = y + Math.sin(angle * i - angle / 4) * 50;
  33.         var cp2X = x + Math.cos(angle * i + angle / 4) * 50;
  34.         var cp2Y = y + Math.sin(angle * i + angle / 4) * 50;
  35.  
  36.         context.moveTo(startX, startY);
  37.         //绘制了花瓣
  38.         context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, startX, startY);
  39.         context.fillStyle = petalColor;
  40.         context.fill();
  41.         //花径
  42.         context.moveTo(x, y + 10);
  43.         context.lineTo(x, y + 60);
  44.         context.stroke();
  45.  
  46.         context.strokeStyle = 'DarkCyan'; // 设置颜色
  47.  
  48.       }
  49.     }
  50.  
  51.     // 调用函数进行绘制
  52.     drawFlower(200, 200, 6, "green", "red");
  53.     drawFlower(250, 300, 8, "green", "red");
  54.   </script>
  55. </body>
  56. </html>

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

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Canvas绘制花朵</title>
  5.   <style>
  6.     canvas {
  7.       border: 1px solid black;
  8.     }
  9.   </style>
  10. </head>
  11. <body>
  12.   <canvas id="myCanvas" width="800" height="600"></canvas>
  13.  
  14.   <script>
  15.  
  16.     // 绘制花朵：x和y定义了花朵中心的位置，radius花朵的半径，petalCount花瓣的数量，petalColor花瓣的颜色，centerColor花朵中心的颜色。
  17.     function drawFlower(x, y, radius,petalCount, petalColor, centerColor) {
  18.         var canvas = document.getElementById("myCanvas");
  19.         var context = canvas.getContext("2d");
  20.         context.lineWidth = 2;
  21.         context.strokeStyle = "pink";
  22.  
  23.         //花瓣
  24.         context.fillStyle = petalColor;
  25.         for (var i = 0; i < petalCount; i++) {
  26.             context.beginPath();
  27.             var angle = (2 * Math.PI / petalCount) * i;
  28.             var petalX = x + Math.cos(angle) * radius;
  29.             var petalY = y + Math.sin(angle) * radius;
  30.             context.arc(petalX, petalY, radius, 0, 2 * Math.PI);
  31.             context.stroke();
  32.             context.fill();
  33.         }
  34.  
  35.         //花蕊
  36.         context.beginPath();
  37.         context.fillStyle = centerColor;
  38.         context.arc(x, y, radius, 0, 2 * Math.PI);
  39.         context.stroke();
  40.         context.fill();
  41.  
  42.  
  43.         //叶子
  44.         context.beginPath();
  45.         context.fillStyle = "green";
  46.         context.arc(x, y + 3 * radius, radius*1.5, 0, Math.PI, false);
  47.         context.closePath();
  48.         context.fill();
  49.         context.beginPath();
  50.         context.fillStyle = "white";  // 使用白色来覆盖原有的大半圆，形成月牙形
  51.         context.arc(x, y + 2.7 * radius, radius*1.5, 0, Math.PI, false);
  52.         context.closePath();
  53.         context.fill();
  54.  
  55.         //花径
  56.         context.beginPath();
  57.         context.lineWidth = radius/10; // 设置线宽
  58.         context.strokeStyle = 'DarkCyan'; // 设置颜色
  59.         context.moveTo(x, y + radius);
  60.         context.lineTo(x, y + 6 * radius);
  61.         context.stroke();
  62.  
  63.     }
  64.  
  65.  
  66.     // 调用函数进行绘制
  67.     drawFlower(500, 250, 30, 4,"#ED6E91", "#f90");
  68.     drawFlower(250, 300, 8, 6, "pink", "red");
  69.   </script>
  70. </body>
  71. </html>

二、画树

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

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Canvas绘制树</title>
  5.   <style>
  6.     canvas {
  7.       border: 1px solid black;
  8.     }
  9.   </style>
  10. </head>
  11. <body>
  12.   <canvas id="myCanvas" width="800" height="600"></canvas>
  13.  
  14.   <script>
  15.     var canvas = document.getElementById("myCanvas");
  16.     var context = canvas.getContext("2d");
  17.  
  18.     // 绘制树
  19.     function drawTree(x, y, len, angle, branchWidth) {
  20.       context.beginPath();
  21.       context.save();
  22.       context.strokeStyle = "#8B4513";
  23.       context.fillStyle = "brown";
  24.       context.lineWidth = branchWidth;
  25.       context.translate(x, y);
  26.       context.rotate(angle * Math.PI / 180);
  27.       context.moveTo(0, 0);
  28.       context.lineTo(0, -len);
  29.       context.stroke();
  30.  
  31.       if (len < 10) {
  32.         context.beginPath();
  33.         context.arc(0, -len, 5, 0, Math.PI * 2, false);  // 树叶
  34.         context.fillStyle = "green";
  35.         context.fill();
  36.         context.restore();
  37.         return;
  38.       }
  39.  
  40.       drawTree(0, -len, len * 0.8, angle - 15, branchWidth * 0.8);
  41.       drawTree(0, -len, len * 0.8, angle + 15, branchWidth * 0.8);
  42.  
  43.       context.restore();
  44.     }
  45.  
  46.     // 调用函数进行绘制
  47.     drawTree(400, 600, 90, 0, 12);
  48.  
  49.  
  50.   </script>
  51. </body>
  52. </html>

说明：绘制树的函数drawTree(x, y, len, angle, branchWidth)，其中参数的含义

x 和 y 参数是树枝的起始点的坐标。在最开始的调用中，这个坐标通常是树的基部。在递归调用中，这个坐标是新的树枝的起点，也就是上一级树枝的终点。

len 参数是树枝的长度。在每次递归调用中，这个长度会减小一些，表示新的树枝比上一级的树枝短一些。

angle 参数是树枝的角度。在最开始的调用中，这个角度通常是 0，表示树直立。在递归调用中，这个角度会有所改变，表示新的树枝相对于上一级的树枝有一个角度。

branchWidth 参数是树枝的宽度。在每次递归调用中，这个宽度会减小一些，表示新的树枝比上一级的树枝细一些。

这个函数首先会在给定的起点和角度处绘制一段长度和宽度为给定值的树枝，然后在这个树枝的终点处递归地绘制两个新的树枝，这两个新的树枝的角度分别向左和向右偏移一定的角度。这个过程一直进行，直到树枝的长度小于一个给定的阈值（在这个例子中是 10）。当达到阈值时，绘制一个绿色的小圆形表示树叶。

树2、是对树1，添加花朵。先给出运行效果图：

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Canvas绘制树</title>
  5.   <style>
  6.     canvas {
  7.       border: 1px solid black;
  8.     }
  9.   </style>
  10. </head>
  11. <body>
  12.   <canvas id="myCanvas" width="800" height="600"></canvas>
  13.  
  14.   <script>
  15.     var canvas = document.getElementById("myCanvas");
  16.     var context = canvas.getContext("2d");
  17.  
  18.     // 绘制树
  19.     function drawTree(x, y, len, angle, branchWidth) {
  20.       context.beginPath();
  21.       context.save();
  22.       context.strokeStyle = "#8B4513";
  23.       context.fillStyle = "brown";
  24.       context.lineWidth = branchWidth;
  25.       context.translate(x, y);
  26.       context.rotate(angle * Math.PI / 180);
  27.       context.moveTo(0, 0);
  28.       context.lineTo(0, -len);
  29.       context.stroke();
  30.  
  31.       if (len < 10) {
  32.         context.beginPath();
  33.         context.arc(0, -len, 5, 0, Math.PI * 2, false);  // 树叶
  34.         context.fillStyle = "green";
  35.         context.fill();
  36.         context.restore();
  37.         return;
  38.       }
  39.  
  40.       drawTree(0, -len, len * 0.8, angle - 15, branchWidth * 0.8);
  41.       drawTree(0, -len, len * 0.8, angle + 15, branchWidth * 0.8);
  42.  
  43.       context.restore();
  44.     }
  45.  
  46.  
  47.     // 绘制花朵
  48.     function drawFlower(x, y, petalCount, petalColor, centerColor) {
  49.       // 绘制花朵的中心
  50.       context.beginPath();
  51.       context.arc(x, y, 8, 0, Math.PI * 2, true);
  52.       context.fillStyle = centerColor;
  53.       context.fill();
  54.  
  55.       var angle = (Math.PI * 2) / petalCount;
  56.       for (var i = 0; i < petalCount; i++) {
  57.         context.beginPath();
  58.         var startX = x + Math.cos(angle * i) * 10;
  59.         var startY = y + Math.sin(angle * i) * 10;
  60.         var cp1X = x + Math.cos(angle * i - angle / 4) * 30;
  61.         var cp1Y = y + Math.sin(angle * i - angle / 4) * 30;
  62.         var cp2X = x + Math.cos(angle * i + angle / 4) * 30;
  63.         var cp2Y = y + Math.sin(angle * i + angle / 4) * 30;
  64.  
  65.         context.moveTo(startX, startY);
  66.         context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, startX, startY);
  67.         context.fillStyle = petalColor;
  68.         context.fill();
  69.       }
  70.     }
  71.  
  72.     // 调用函数进行绘制
  73.     drawTree(400, 600, 90, 0, 12);
  74.     drawFlower(400, 250, 6, "DeepPink", "red");
  75.     drawFlower(250, 400, 6, "DeepPink", "red");
  76.     drawFlower(550, 400, 6, "DeepPink", "red");
  77.  
  78.   </script>
  79. </body>
  80. </html>

附录

更多例子可见：https://blog.csdn.net/cnds123/article/details/112392014

关于 HTML的元素、标签和属性 是什么，可见https://blog.csdn.net/cnds123/article/details/125745562

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号