CSS convert gradient to the canvas version

问题

I have a gradient that I need to apply to a canvas.

section {
  width: 440px;
  height: 171px;
  background-image: linear-gradient(185deg, #39adb2 0%, rgba(255, 255, 255, 0.24) 100%), linear-gradient(to top, rgba(152, 227, 230, 0.18) 0%, rgba(196, 229, 255, 0) 99%, rgba(196, 229, 255, 0) 100%);
  opacity: 0.48;
}

<section></section>

I need help to convert this to the canvas API; I don't have a clue how to do it. maybe there is an online tool?

  var gradientFill = ctx.createLinearGradient(100, 10, 100, 100);
  gradientFill.addColorStop(0, "#39adb2");
  gradientFill.addColorStop(0.99, "rgba(196, 229, 255, 0)");
  gradientFill.addColorStop(1, "rgba(196, 229, 255, 0)");
  gradientFill.addColorStop(0, "#39adb2");
  gradientFill.addColorStop(1, "rgba(152, 227, 230, 0.18)");

回答1:

Here is how you can convert the CSS gradient to canvas version ...

var ctx = document.querySelector('#canvas').getContext('2d');

var grd = ctx.createLinearGradient(0, 0, 0, 171);
grd.addColorStop(0,"#39ADB2");
grd.addColorStop(0,"#98E3E6");
grd.addColorStop(1,"#FFFFFF");

ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);

<canvas id="canvas" width="440" height="171"></canvas>

回答2:

Quick answer as I don`t have time to explain the math.

The angle extends the length of the gradient as it must fit the corners. To find solve a triangle that is the diagonal center line of the gradient.

I have change the gradient to show that it fits with a black start center and end. I am sure you can change to the gradient you need.

Image shows vars. Find length of hypt, use that to find fromTopRight and use that to find diag. Dist from center is len = hypt + diag. See code for step by step.

var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cx = w / 2;
var cy = h / 2;
var cssAng = 185;
var canAng = cssAng - 90;
var ang = (canAng - 90) * (Math.PI / 180);
var hypt = cy / Math.cos(ang);
var fromTopRight = cx - Math.sqrt(hypt * hypt - cy * cy);
var diag = Math.sin(ang) * fromTopRight;
var len = hypt + diag;

var topX = cx + Math.cos(-Math.PI / 2 + ang) * len;
var topY = cy + Math.sin(-Math.PI / 2 + ang) * len;
var botX = cx + Math.cos( Math.PI / 2 + ang) * len;
var botY = cy + Math.sin( Math.PI / 2 + ang) * len;

var grad = ctx.createLinearGradient(topX,topY,botX,botY);
grad.addColorStop(0, 'rgba(0,0,0,1)');
grad.addColorStop(0.01, 'rgba(196,230,255,1)');
grad.addColorStop(0.49, 'rgba(196,230,255,1)');
grad.addColorStop(0.50, 'rgba(0,0,0,1)');
grad.addColorStop(0.51, 'rgba(196,230,255,1)');
grad.addColorStop(0.99, 'rgba(152,227,230,1)');
grad.addColorStop(1, 'rgba(0,0,0,1)');

ctx.fillStyle = grad;
ctx.fillRect(0, 0, 440,171);

canvas {
   border : 1px solid black;
}

<canvas id="canvas" width = 440 height = 171></canvas>

回答3:

Please try this.

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var grad = context.createLinearGradient(0,0,0,171);

    grad.addColorStop(0, 'rgba(196,230,255,1)');
    grad.addColorStop(1, 'rgba(255,255,255,1)');

    context.fillStyle = grad;
    context.fillRect(0, 0, 440,171);

<canvas id='canvas' width='440' height='171' ></canvas>

来源：https://stackoverflow.com/questions/45034238/css-convert-gradient-to-the-canvas-version

标签

javascript

html

css

canvas