Prompt在线图形生成并下载

Prompt在线图形生成并下载

作者：庄泽峰 / 2023-12-15 10:52

这是让GPT写的代码，开始Prompt提示词：Hello，GPT，请你用html5+CSS3来实现：我想让你随意画个图形，要好看一点的；然后，再跟GPT说：我想把这个图形生成图片，并能下载保存下来；最后提示：要有一个点击下载的按钮，不要一打开就跳出下载

下面是GPT写出来的Javascript+CSS3在线图形生成并下载页面：

<!DOCTYPE html>
<html>
<head>
  <style>
    .shape {
      width: 200px;
      height: 200px;
      background-color: #ffcc00;
      border-radius: 50%;
      position: relative;
    }

    .shape:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: #ffffff;
      border-radius: 50%;
    }

    .shape:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background-color: #ffcc00;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="shape"></div>
  <button onclick="downloadImage()">下载图形</button>

  <script>
    function downloadImage() {
      var canvas = document.createElement('canvas');
      var shape = document.querySelector('.shape');
      var width = shape.offsetWidth;
      var height = shape.offsetHeight;
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#ffcc00';
      ctx.fillRect(0, 0, width, height);
      ctx.fillStyle = '#ffffff';
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, width / 4, 0, 2 * Math.PI);
      ctx.fill();
      ctx.fillStyle = '#ffcc00';
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, width / 8, 0, 2 * Math.PI);
      ctx.fill();

      var link = document.createElement('a');
      link.href = canvas.toDataURL();
      link.download = 'shape.png';
      link.click();
    }
  </script>
</body>
</html>

标签: Prompt JavaScript CSS3 分类: Prompt