如何将 Canvas 中的太阳转换成 CSS 渐变。

Question

如何将 Canvas 中的太阳转换成 CSS 渐变。

cssgradientlinear-gradients

5

这是我试图将其转换为CSS渐变的画布太阳。

下面是我尝试用CSS渐变复制此图像的结果。

试图使渐变看起来与画布图像完全相同。

https://jsfiddle.net/rwj1Lacg/

        let s = document.createElement("canvas");
        s.width = s.height = 512;
        let sun = s.getContext("2d");

        let canvas = document.getElementById("c");
        canvas.width = canvas.height = 512;
        let ctx = canvas.getContext("2d");

        let gradient = sun.createLinearGradient(0, 50, 0, canvas.height-50);
        gradient.addColorStop(0, '#fbf120ff');

        gradient.addColorStop(0.355, "#fd8227ff");
        gradient.addColorStop(0.356, "#fd822700");
        gradient.addColorStop(0.364, "#fd822700");
        gradient.addColorStop(0.365, "#fd8227ff");

        gradient.addColorStop(0.42, "#fe6828ff");
        gradient.addColorStop(0.421, "#fe682800");
        gradient.addColorStop(0.434, "#fe682800");
        gradient.addColorStop(0.435, "#fe6828ff");
        
        gradient.addColorStop(0.49,"#fe5430ff");
        gradient.addColorStop(0.491,"#fe543000");
        gradient.addColorStop(0.509,"#fe543000");
        gradient.addColorStop(0.51,"#fe5430ff");

        gradient.addColorStop(0.562,"#fe4b38ff");
        gradient.addColorStop(0.563,"#fe4b3800");
        gradient.addColorStop(0.582,"#fe4b3800");
        gradient.addColorStop(0.584,"#fe4b38ff");

        //64 -- fe3446
        gradient.addColorStop(0.63,"#fe3446ff");
        gradient.addColorStop(0.631,"#fe344600");
        gradient.addColorStop(0.657,"#fe344600");
        gradient.addColorStop(0.658,"#fe3446ff");
        
        //73 -- fe2558
        gradient.addColorStop(0.710,"#fe2558ff");
        gradient.addColorStop(0.711,"#fe255800");
        gradient.addColorStop(0.739,"#fe255800");
        gradient.addColorStop(0.74,"#fe2558ff");

        //80 -- fe1f5f
        gradient.addColorStop(0.785,"#fe1f5fff");
        gradient.addColorStop(0.786,"#fe1f5f00");
        gradient.addColorStop(0.825,"#fe1f5f00");
        gradient.addColorStop(0.826,"#fe1f5fff");
        //87 -- fe1967
        gradient.addColorStop(0.860,"#fe1967ff");
        gradient.addColorStop(0.861,"#fe196700");
        gradient.addColorStop(0.905,"#fe196700");
        gradient.addColorStop(0.906,"#fe1967ff");
        //94 -- ff1270
        gradient.addColorStop(.940, '#ff1270ff');
        gradient.addColorStop(.941, '#ff127000');
        sun.fillStyle = gradient;
        sun.beginPath();
        sun.arc(canvas.height/2, canvas.height/2, 206, 0, 2 * Math.PI);
        sun.fill();
        
        ctx.shadowColor = '#ff0d77af';
        ctx.shadowBlur = 50;
        ctx.drawImage(s, 0,0);

body{
  background-color: #191231;
}

<body>
<canvas id=c></canvas>
</body>

这是我试图将画布太阳转换为CSS渐变的尝试。

如何改进并使其更好？ https://jsfiddle.net/vzpew31s/

这看起来不完全相同/与画布图像相同。

body {
  background-color: #191231;
}

.sun {
  margin: 2rem;
  position: relative;
  width: 412px;
  padding-top: 412px;
  background: linear-gradient(#fbed20 0%,
      #fd8427 30%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 30.5%,
      #ff8427 30.5%,
      #fe6928 38%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, 0) 39%,
      #fe6928 39%,
      #fe5430 45%,
      rgba(0, 0, 0, 0) 44%,
      rgba(0, 0, 0, 0) 46.5%,
      #fe5430 46.5%,
      #fe4b38 52%,
      rgba(0, 0, 0, 0) 52%,
      rgba(0, 0, 0, 0) 53.5%,
      #fe4b38 53.5%,
      #fe3446 59%,
      rgba(0, 0, 0, 0) 59%,
      rgba(0, 0, 0, 0) 61%,
      #fe3446 61%,
      #fe2558 66%,
      rgba(0, 0, 0, 0) 66%,
      rgba(0, 0, 0, 0) 69%,
      #fe2558 69%,
      #fe1f5f 74%,
      rgba(0, 0, 0, 0) 74%,
      rgba(0, 0, 0, 0) 77%,
      #fe1f5f 77%,
      #fe1967 84%,
      rgba(0, 0, 0, 0) 84%,
      rgba(0, 0, 0, 0) 88%,
      #fe1967 88%,
      #fe126f 92%,
      rgba(0, 0, 0, 0) 92%,
      rgba(0, 0, 0, 0) 100%);
  border-radius: 50%;
  box-shadow: 0px -50px 50px rgba(255, 13, 119, 0.686);
}

.sun:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 13, 119, 0.686), rgba(0, 0, 0, 0));
}

<div class="sun"></div>

- user17382064

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- the Hutt · Accepted Answer

将阴影从.sun中移除并添加到.sun:before中。同时，为.sun:before使用相同的颜色渐变，但不同的alpha值。并调整底部。

body {
  background-color: #191231;
}

.sun {
  margin: 2rem;
  position: relative;
  width: 412px;
  padding-top: 412px;
  background: linear-gradient(#fbed20 0%,
      #fd8427 28.5%,
      transparent 29%,
      rgba(0, 0, 0, 0) 29% 30%,
      #ff8427 30%,
      #fe6928 37.2%,
      rgba(0, 0, 0, 0) 37.2%,
      rgba(0, 0, 0, 0) 39%,
      #fe6928 39%,
      #fe5430 43.5%,
      rgba(0, 0, 0, 0) 43%,
      rgba(0, 0, 0, 0) 45.5%,
      #fe5430 45.5%,
      #fe4b38 51%,
      rgba(0, 0, 0, 0) 51%,
      rgba(0, 0, 0, 0) 53.5%,
      #fe4b38 53.5%,
      #fe3446 58.6%,
      rgba(0, 0, 0, 0) 58.6%,
      rgba(0, 0, 0, 0) 61%,
      #fe3446 61%,
      #fe2558 67%,
      rgba(0, 0, 0, 0) 67%,
      rgba(0, 0, 0, 0) 70%,
      #fe2558 70%,
      #fe1f5f 75%,
      rgba(0, 0, 0, 0) 75%,
      rgba(0, 0, 0, 0) 79%,
      #fe1f5f 79%,
      #fe1967 83%,
      rgba(0, 0, 0, 0) 83%,
      rgba(0, 0, 0, 0) 88%,
      #fe1967 88%,
      #fe126f 92%,
      rgba(0, 0, 0, 0) 92%,
      rgba(0, 0, 0, 0) 100%);
  border-radius: 50%;
  /*box-shadow: 0px -0px 50px rgba(255, 13, 119, 0.686);*/
  
}

.sun:before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  /* change this to move bottom shadow up */
  bottom: 40px; 
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 13, 119, 0.65), rgba(255, 13, 119, 0.1));
  box-shadow: 0px -0px 60px rgba(255, 13, 119, 0.6);  
}

<div class="sun"></div>