javascript - 我应该使用 CSS 缩放整个画布，还是应该使用相对值调整每个图像的大小？

Question

我正在尝试拥有一个全屏画布，并且我想根据其内容按比例调整它的大小。我正在争论这两种方法中哪一种更好......

1）让所有东西都具有基于像素的值，然后如果窗口被调整大小，只需用 css 缩放整个画布......

 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 canvas.width = 1280;
 canvas.height = window.innerHeight;
 var sizeCanvas = function(){
   scale = window.innerWidth/1280;
   canvas.style.transform = 'scale('+ scale + ')';
   canvas.height = window.innerHeight/scale;
 }
 sizeCanvas();
 window.addEventListener('resize', function(){
   sizeCanvas();
 });
 function loop(){
   window.requestAnimationFrame(loop);
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.drawImage(img, 0,0,1280,300);
 }

或 2) 以 window.inner 大小不断绘制画布，并使用相对于画布宽度和高度的值调整每个图像的大小

 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var sizeCanvas = function(){
   canvas.height = window.innerHeight;
   canvas.width = window.innerWidth;
 }
 sizeCanvas();
 window.addEventListener('resize', function(){
   sizeCanvas();
 });
 function loop(){
   window.requestAnimationFrame(loop);
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height/4);
 }

我在画布上有很多事情要做，所以我想性能可能是最重要的

标签： javascripthtmlcsscanvashtml5-canvas