Должен ли я масштабировать весь холст с помощью CSS или мне нужно изменить размер каждого изображения с относительными значениями? - PullRequest
Новая
       31

Должен ли я масштабировать весь холст с помощью CSS или мне нужно изменить размер каждого изображения с относительными значениями?

0 голосов
/ 31 декабря 2018

Я пытаюсь создать полноэкранный холст, и я хотел изменить его размер пропорционально.Я обсуждаю, какой из этих двух методов лучше ...

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

У меня много работы на холсте, поэтому ядумаю, производительность, вероятно, самый большой приоритет

...