Question

我在画布上创建渐变，生成PNG文件，然后下载它。我想要一个椭圆的径向渐变。由于画布渐变必须是圆形，因此我将渐变生成为圆形，然后调整画布元素的大小以创建椭圆。这很好，视觉生成的图像是我想要的椭圆。

当我下载生成的画布时，它使用的是画布的全尺寸，而不是css样式的尺寸，所以我得到了原始的全尺寸圆圈。有没有办法真正改变画布图像的尺寸， NOT 保持纵横比？显示在该主题上的所有SO帖子都希望保持宽高比。

＆＃13;

makeCanvas();
scaled();

var input = document.createElement("input");
input.type = "button";
input.style.display = "block";
input.value = "Download Canvas to PNG";
input.onclick = function() {
  var canvas = document.getElementById("canvas");
  downloadURI(canvas.toDataURL("image/png"), "gradient.png");
}
document.body.appendChild(input);

var input = document.createElement("input");
input.type = "button";
input.style.display = "block";
input.value = "Download Scaled";
input.onclick = function() {
  var canvas = document.getElementById("scaled");
  downloadURI(canvas.toDataURL("image/png"), "gradient.png");
}
document.body.appendChild(input);

function makeCanvas() {
  var canvasGradient;
  var ctx;
  width = 200;
  height = 200;
  var canvas = document.createElement("canvas");
  canvas.id = "canvas";
  canvas.style.width = width + "px";
  canvas.style.height = height + "px";
  canvas.width = width;
  canvas.height = height;
  ctx = canvas.getContext('2d');

  var gradient;
  // both circles have to share the center of the canvas
  var coords = {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0
  };
  coords.x1 = (width / 2);
  coords.x2 = coords.x1;
  coords.y1 = (height / 2);
  coords.y2 = coords.y1;
  // inner circle is just the center - a point
  coords.r1 = 0;
  // outer circle is the edge
  coords.r2 = Math.min(height, width);
  gradient = ctx.createRadialGradient(coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);
  gradient.addColorStop(0, "white");
  gradient.addColorStop(1, "black");
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, width, height);
  canvas.style.width = width / 2 + "px";
  document.body.append(canvas);

  can = alter(canvas, ctx);
  //document.body.append(can);
}

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

function alter(canvas, ctx) {
  var can = document.createElement("canvas");
  can.id = "can";
  can.width = Math.floor(canvas.width / 2);
  can.height = canvas.height;
  can.ctx = can.getContext("2d");
  can.ctx.drawImage(canvas, 0, 0, can.width, can.height);
  canvas.width = can.width;
  canvas.height = can.height;
  ctx.drawImage(can, 0, 0);
  return can;
}

function scaled() {
   var canvas = document.createElement("canvas");
  canvas.id = "scaled";
  canvas.style.width = "200px";
  canvas.style.height = "200px";
  canvas.width = 200;
  canvas.height = 200;
  ctx = canvas.getContext('2d');

  var gradient;
 var g = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
  g.addColorStop(0, "white")
  g.addColorStop(1, "red")
  ctx.fillStyle = g
  ctx.scale(0.5, 1) // scale x axis 0.5
  ctx.fillRect(0, 0, 200, 200) // gradient circle squashed along x  
   document.body.append(canvas);
}

＆＃13;

Answer 1

使用变换来改变渐变的形状。

对于您的信息，渐变圆可以转换为椭圆。

var g = ctx.createRadialGradient(200,200,0,200,200,200)
g.addColorStop(0,"red")
g.addColorStop(1,"white")
ctx.fillStyle = g
ctx.scale(0.5,1) // scale x axis 0.5
ctx.fillRect(0,0,400,400)  // gradient circle squashed along x

缩放画布

创建第二个画布

// assuming canvas , ctx is the original canvas and context
var can = document.createElement("canvas");

设置分辨率

can.width = Math.floor(canvas.width / 2);
can.height = canvas.height;

获取上下文并在新画布上绘制原始文件

can.ctx = can.getContext("2d");
can.ctx.drawImage(canvas,0,0,can.width,can.height);

将原始画布设置为新尺寸

canvas.width = can.width;
canvas.height = can.height;

在缩放的画布上绘制到原始画布上

ctx.drawImage(can,0,0);
can = undefined; // reference to dump temp canvas

您现在拥有画布比例但保留了内容。您也可以用新的画布替换旧画布

永久改变画布图像的尺寸，不保持纵横比

1 个答案:

使用变换来改变渐变的形状。

缩放画布