js-在canvas上绘制圣诞树

柠檬鸡腿baiAries_0224

于 2024-01-05 19:32:59 发布

阅读量439

点赞数 7

分类专栏： web编程文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lyl2716137528/article/details/135416647

版权

web编程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML5CanvasAPI在网页上绘制图形，并实现鼠标点击时对特定区域（三角形和矩形）进行填充颜色的交互功能。

摘要由CSDN通过智能技术生成

鼠标点击填充颜色

<html>
<head>
  <title>Canvas绘制图形</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>

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

    function drawTriangle(x1, y1, x2, y2, x3, y3) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.lineTo(x3, y3);
      ctx.closePath();
      ctx.stroke();
    }

    function drawRectangle(x, y, width, height) {
      ctx.beginPath();
      ctx.rect(x, y, width, height);
      ctx.stroke();
    }

    function drawGreenTriangle(x1, y1, x2, y2, x3, y3) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.lineTo(x3, y3);
      ctx.closePath();
      ctx.fillStyle = 'green';
      ctx.fill();
    }

    function drawGreenRectangle(x, y, width, height) {
      ctx.beginPath();
      ctx.rect(x, y, width, height);
      ctx.fillStyle = 'brown';
      ctx.fill();
    }

    var triangles = [
      { x1: 100, y1: 100, x2: 150, y2: 20, x3: 200, y3: 100 },
      { x1: 100, y1: 200, x2: 150, y2: 100, x3: 200, y3: 200 }
    ];
    var rectangle = { x: 125, y: 200, width: 50, height: 150 };

    function drawShapes() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      triangles.forEach(function(triangle) {
        drawTriangle(triangle.x1, triangle.y1, triangle.x2, triangle.y2, triangle.x3, triangle.y3);
      });
      drawRectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
    }

    drawShapes();

    canvas.addEventListener('click', function(event) {
      var rect = canvas.getBoundingClientRect();
      var mouseX = event.clientX - rect.left;
      var mouseY = event.clientY - rect.top;

      triangles.forEach(function(triangle) {
        if (
          (mouseX >= Math.min(triangle.x1, triangle.x2, triangle.x3)) &&
          (mouseX <= Math.max(triangle.x1, triangle.x2, triangle.x3)) &&
          (mouseY >= Math.min(triangle.y1, triangle.y2, triangle.y3)) &&
          (mouseY <= Math.max(triangle.y1, triangle.y2, triangle.y3))
        ) {
          drawGreenTriangle(triangle.x1, triangle.y1, triangle.x2, triangle.y2, triangle.x3, triangle.y3);
        }
      });

      if (
        (mouseX >= rectangle.x) &&
        (mouseX <= (rectangle.x + rectangle.width)) &&
        (mouseY >= rectangle.y) &&
        (mouseY <= (rectangle.y + rectangle.height))
      ) {
        drawGreenRectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
      }
    });
  </script>
</body>
</html>