javascript - Canvas 宽度/高度如何以及为什么会扰乱我的图像绘制？

Question

我正在尝试编写一个函数，该函数接受 x,y 坐标和旋转，并将围绕图像中心点旋转的图像插入到 Canvas 中。此代码运行良好:

let img = new Image(),
	canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	step = 0, 
	drawImage = (ctx, img, x, y, degrees,  w = 150, h = 150) => {
		ctx.save();
		ctx.translate(x+w/4, y+h/4);
		ctx.rotate(degrees*Math.PI/180.0);
		ctx.translate(-x-w/4, -y-h/4);
		ctx.drawImage(img, x, y, w, h);
		ctx.restore();
	},
	animate = () => {
		ctx.globalCompositeOperation = 'destination-over';
		// clear canvas
		ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); 

		drawImage(ctx, img, 0, 	0, step)
	

		step++;
		window.requestAnimationFrame(animate);
	}


img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

animate();

* { margin:0; padding:0; } /* to remove the top and left whitespace */
	html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
	canvas { display:block;} /* To remove the scrollbars */

<canvas id="canvas" width="300" height="300">

但是当我尝试调整 Canvas 大小时

canvas.width =window.innerWidth;
canvas.height = window.innerHeight;

这会扭曲图像并改变旋转点，在更大的窗口上效果更清晰。如何才能拥有一个填满屏幕的 Canvas 并将其视为使用 HTML 属性设置大小？

let img = new Image(),
	canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	step = 0, 
	drawImage = (ctx, img, x, y, degrees,  w = 300, h = 300) => {
		ctx.save();
		ctx.translate(x+w/4, y+h/4);
		ctx.rotate(degrees*Math.PI/180.0);
		ctx.translate(-x-w/4, -y-h/4);
		ctx.drawImage(img, x, y, w, h);
		ctx.restore();
	},
	animate = () => {
		ctx.globalCompositeOperation = 'destination-over';
		// clear canvas
		ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); 

		drawImage(ctx, img, 0, 	0, step)
	

		step++;
		window.requestAnimationFrame(animate);
	}


img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
canvas.width =window.innerWidth;
canvas.height = window.innerHeight;

animate();

	* { margin:0; padding:0; } /* to remove the top and left whitespace */
	html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
	canvas { display:block;} /* To remove the scrollbars */

<canvas id="canvas" width="300" height="300">

Answer 1

这是 Chrome 的一个“bug”，与您要求它绘制的错误 svg 图像有关。

你绘制的svg没有绝对width或height属性，也不是viewBox一。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
</svg>

这意味着它没有固有尺寸，也没有任何固有比率。在 HTML 上下文中，浏览器仍然可以通过应用 Inline, replaced elements 中描述的规则来设置默认大小。 。

通过遵循这些规则，<img>将 svg 保存在相对大小的容器中，计算的大小将为300 x 150px( width => 300px 、 height => 2:1 * width => 150px )。然而，它的内在大小是 0 Firefox 将通过 naturalXXX 报告此情况属性，而 Chrome 会将这些设置为 300和150 .

onload = e => {
  const img = document.querySelector('img');
  console.log(
    'computed',
    img.width, // 300
    img.height // 150
  );
  console.log(
    'intrinsic',
    img.naturalWidth, // 0 in FF, 300 in Chrome
    img.naturalHeight // 0 in FF, 150 in Chrome
  );
}

img { border: 1px solid blue}

<img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg">

现在，当您要在 Canvas 上绘制此图像时，没有这样的 CSS 规则来规定如何计算此计算尺寸，并且 UA 不同意您在 Canvas 上绘制此图像时会发生什么。
Firefox 不会绘制它(记住，他们将 naturalXXX 设置为 0 。Chrome 将使用一些神奇的启发法来绘制它认为应该绘制的最佳效果。这就是我所说的错误。
如果 drawImage 中使用了 HTMLImageElement没有srcset (即它的密度是 1 ) drawImage(img, x, y)应该产生与 drawImage(img, x, y, img.naturalWidth, img.naturalHeight) 相同的结果.
然而，考虑到他们对这些没有内在尺寸的图像所使用的魔法，事实并非如此。

因此，您会在 Chrome 中看到它变形，因为您要求将其绘制为 300 x 300 的矩形。

const img = new Image(),
  canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  draw = async () => {
    const w = img.naturalWidth,
          h = img.naturalHeight;
    console.log('reported img size', w, h);
    ctx.fillRect(0, 0, w, h);
    await wait(2000);
    console.log('drawImage with reported size');
    ctx.drawImage(img, 0, 0, w, h);    
    await wait(2000);
    console.log('default drawImage');   
    ctx.drawImage(img, 0, 0);
  };


img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

img.onload = draw;

function wait(ms) {
  return new Promise(res => setTimeout(res, ms));
}

<canvas id="canvas" width="300" height="300">

所以你可以尝试测量你需要的比率 drawImage(img, x, y, w, h)与仅使用 3 个参数时相同，但最好的可能是使用正确的 svg，并设置绝对宽度和高度，这将使其在每个浏览器中工作:

let img = new Image(),
  canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  step = 0,
  drawImage = (ctx, img, x, y, degrees, w = 300, h = 300) => {
    ctx.save();
    ctx.translate(x + w / 4, y + h / 4);
    ctx.rotate(degrees * Math.PI / 180.0);
    ctx.translate(-x - w / 4, -y - h / 4);
    ctx.drawImage(img, x, y, w, h);
    ctx.restore();
  },
  animate = () => {
    ctx.globalCompositeOperation = 'destination-over';
    // clear canvas
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

    drawImage(ctx, img, 0, 0, step)

    step++;
    window.requestAnimationFrame(animate);
  }


canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

img.onload = animate;

fetch("https://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg")
  .then(resp => resp.text())
  .then(markup => {
    const mime = 'image/svg+xml';
    const doc = new DOMParser().parseFromString(markup, mime);
    doc.documentElement.setAttribute('width', 150);
    doc.documentElement.setAttribute('height', 150);
    img.src = URL.createObjectURL(
      new Blob( [new XMLSerializer().serializeToString(doc)], { type: mime } )
    );
  })
  .catch(console.error);

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block;} /* To remove the scrollbars */

<canvas id="canvas" width="300" height="300">