Синхронизировать канвас с анимацией

197
29 июня 2017, 04:50

В каждом фрейме отрисовки (requestAnimationFrame) в центре канваса рисуется круг. Размер канваса анимируется. В Хроме и FF круг немного дрожит, а в IE он заметно толстеет перед перерисовкой - т. е. браузер сначала растягивает имеющуюся картинку, а потом заменяет её новой. Почему так происходит и как исправить?

Насколько я представляю, если я делаю что-то в requestAnimationFrame, то содержимое страницы вообще не должно перерисовываться, пока я не закончу. Соответственно, на момент отрисовки должна отрисоваться сразу новая версия. Но в IE сценарий не такой?

https://jsfiddle.net/3wLroppt/

function draw() { 
  var canvas = document.querySelector('canvas'); 
   
  var width = canvas.clientWidth, height = canvas.clientHeight; 
   
  canvas.width = width * 2; 
  canvas.height = height * 2; 
   
  var ctx = canvas.getContext('2d'); 
   
  var cx = width, cy = height, r = height; 
   
  ctx.beginPath(); 
  ctx.arc(cx, cy, r, 0, 2 * Math.PI, false); 
  ctx.fill(); 
} 
 
requestAnimationFrame(function frame() { 
  draw(); 
  requestAnimationFrame(frame); 
});
canvas { 
  outline: 1px dotted red; 
  height: 200px; 
  width: 200px; 
  display: block; 
  margin: auto; 
  animation: w-100-200 .5s linear infinite; 
} 
 
@keyframes w-100-200 { 
    0% { width: 200px; } 
   50% { width: 400px; } 
  100% { width: 200px; } 
}
<canvas width="200" height="200"></canvas>

Answer 1

Вы же сами написали - браузер сначала рисует кружок с помощью js,а css его тем временем растягивает. 

let start = Date.now(); 
const canvas = document.querySelector('canvas'); 
const ctx = canvas.getContext('2d'); 
const height = canvas.clientHeight; 
 
function draw() { 
  let dt = Date.now() - start; 
  var side = Math.pow(-1, ~~(dt/500)); 
  var delta_width = 200 * (dt%500)/500; 
   
  width = canvas.width = ((side>0)?200:400) + side * delta_width;     
  prev = Date.now();       
  var cx = width/2, cy = height, r = height; 
  ctx.beginPath(); 
  ctx.arc(cx, 100, 100, 0, 2 * Math.PI, false); 
  ctx.fill(); 
} 
 
setInterval(draw, 54);
canvas { 
  outline: 1px dotted red; 
  height: 200px; 
  display: block; 
  margin: auto; 
}
<canvas width="200" height="200"></canvas>

READ ALSO
Наследование свойств элементов. ASP.NET
javascript

Наследование свойств элементов. ASP.NET

Необходимо решить следующую проблему

 294
Link-list JAWS feature (insert + F7) on dialog windows shows all background links
javascript

Link-list JAWS feature (insert + F7) on dialog windows shows all background links

I use role="document" and Angular $modalInstance to implement dialog window (look at the picture below)

 172
Калькулятор на JS (jQuery)
javascript

Калькулятор на JS (jQuery)

Здравствуйте, нужно сделать калькулятор по формуле value1*(value2+value3)

 318
Как ввести переменную в запрос mysql и вывести другую
PHP

Как ввести переменную в запрос mysql и вывести другую

Господа, нужна помощь в формулировке запроса к базе или может быть совет как более грамотно все организоватьДано 2 таблицы sql в первой хранятся...

 346