svg自动生成创作绘画导出图片效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：svg自动生成创作绘画导出图片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 60px 20px;
  height: calc(100vh - 120px);
  background: #ddd;
}

svg#canvas {
  width: 100%;
  height: 100%;
}

.btn {
  display: flex;
  border: none;
  position: absolute;
  right: 10px;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 5%);
}

.btn:hover {
  cursor: pointer;
  background: #00f;
}

.btn:hover svg {
  fill: #fff;
}

.btn:focus {
  outline: none;
}

.btn-generate {
  top: 10px;
}

.btn-copy {
  top: 50px;
}

.btn-save {
  top: 90px;
}

.btn-save-image {
  top: 130px;
}

.btn-generate svg,
.btn-copy svg,
.btn-save svg,
.btn-image svg{
  display: block;
}

.btn-copy svg {
  display: none;
}

.btn-copy svg.show {
  display: block;
}

@media only screen and (max-width: 767px) {
  .btn {
    top: 10px;
  }
  .btn-generate {
    right: 10px;
  }

  .btn-copy {
    right: 50px;
  }

  .btn-save {
    right: 90px;
  }
  
  .btn-save-image {
    right: 130px;
  }
}

.stamp {
  text-align: center;
  font-family: Helvetica;
  font-size: 8px;
  color: #000;
  letter-spacing: 2px;
  display: block;
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
}
</style>

 


</head>

<body >
  <?xml version="1.0" encoding="utf-8" ?>
<svg id="canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>

<button class="btn btn-generate">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z"/><path d="M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.246H5.5v7.352h1.141zm0-3.75V5.277h1.57c.881 0 1.416.499 1.416 1.32 0 .84-.504 1.324-1.386 1.324h-1.6z"/></svg>
</button>

<button class="btn btn-copy">
  <svg class="clipboard show" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>
  <svg class="clipboard-done" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" class="bi bi-clipboard-check" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>
</button>

<button class="btn btn-save">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
</button>

<button class="btn btn-save-image">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/><path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54A.505.505 0 0 1 1 12.5v-9a.5.5 0 0 1 .5-.5h13z"/></svg>
</button>

<div class="stamp"></div>
 
  <script src='https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.min.js'></script>

      <script >

//Set up Canvas
var w = 1000;
var h = 1000;
var canvas = SVG('#canvas').css('background', 'transparent');
canvas.viewbox(0, 0, w, h);

//Set up random factors
var artworkID;
var offsetW = Math.round(w / 10);
var offsetH = Math.round(h / 10);
var btlx, btly, btrx, btry, bblx, bbly, bbrx, bbry,
eyelw0, eyelx0, eyely0, eyelw1, eyelx1, eyely1, eyerw0, eyerx0, eyery0, eyerw1, eyerx1, eyery1,
mouthlx, mouthly, mouthrx, mouthry,
dirx, diry,
app_cs, app_csSeed;

//Set up colour scheme
var cscheme = new Array();
cscheme[0] = ["#eee"];

//Rendering
generate();

function generate() {
  //Setup
  app_cs = rand(cscheme.length);
  app_csSeed = rand(cscheme[app_cs].length);
  btlx = rand(w - offsetW * 2 - w / 2) + offsetW;
  btly = rand(h - offsetH * 2 - h / 2) + offsetH;
  btrx = rand(w - offsetW * 2 - w / 2) + Math.round(w / 2);
  btry = rand(h - offsetH * 2 - h / 2) + offsetH;
  bblx = rand(w - offsetW * 2 - w / 2) + offsetW;
  bbly = rand(h - offsetH * 2 - h / 2) + Math.round(h / 2);
  bbrx = rand(w - offsetW * 2 - w / 2) + Math.round(w / 2);
  bbry = rand(h - offsetH * 2 - h / 2) + Math.round(h / 2);

  eyelw0 = rand(w / 6) + 30;
  eyelx0 = rand(w / 4);
  eyely0 = rand(h / 10);
  eyelw1 = rand(eyelw0 / 2 - 10) + 10;
  eyelx1 = rand((eyelw0 - eyelw1) / 3);
  eyely1 = rand((eyelw0 - eyelw1) / 3);
  eyerw0 = rand(w / 6) + 30;
  eyerx0 = rand(w / 4);
  eyery0 = rand(h / 10);
  eyerw1 = rand(eyerw0 / 2 - 10) + 10;
  eyerx1 = rand((eyerw0 - eyerw1) / 3);
  eyery1 = rand((eyerw0 - eyerw1) / 3);

  mouthlx = rand(w - offsetW * 2 - w / 2) + offsetW;
  mouthly = rand(h / 3);
  mouthrx = rand(w - offsetW * 2 - w / 2) + Math.round(w / 2);
  mouthry = rand(h / 3);

  //349358587266172540641629-1350232-521224-12123989-161813-362113673254
  //getArt(349,358,58.........完整代码请登录后点击上方下载按钮下载查看