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

我有很多事情要做，所以我认为性能可能是最重要的事情

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

0 个答案: