永久更改 canvas 图像的尺寸并且不保持纵横比

Question

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

当我去下载生成的 canvas 时，它使用的是 canvas 的完整大小，而不是 css 样式大小，所以我得到了原始的完整大小的圆圈.有没有办法实际改变 canvas 图像的尺寸并且 NOT 保持纵横比？所有出现在该主题上的 SO 帖子都希望保持纵横比。

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);
}

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

缩放 canvas

创建第二个canvas

// 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;

获取上下文并在新的上绘制原创内容canvas

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

将原来的 canvas 设置为新尺寸

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

在原来的罐头上画上刻度canvas

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

您现在拥有 canvas 比例但保留了内容。您也可以将旧的 canvas 替换为新的

永久更改 canvas 图像的尺寸并且不保持纵横比

Alter the dimensions of the canvas image permanently and NOT keep the aspect ratio

javascript

canvas

aspect-ratio

radial-gradients

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

缩放 canvas