canvas находится desenfocado

Очень добрый вечер!, так как так такой каковым, оказывается, что canvas находится desenfocado... Я не понимаю, потому что, с другими проектами не ли он desenfocado!, мне не стоит использовать:

image-rendering: pixelated;

css, так как это решает одинокую проблему для тех элементов, у которых нет кривых..., но оказывается, что у моего canvas есть элементы с кривыми, как мяч (Который является кругом, сделанным с функцией arc) и текст, у canvas есть этот аспект... (Открывать изображение, чтобы видеть ее, как я вижу ее в моем персональном компьютере):

introducir la descripción de la imagen aquí Восток - html:




    
    
    
    
    
    
    
    
    
    Arkanoid


    ¡Este elemento no esta soportado para su navegador!


И это css:

*{
    margin: 0;
    padding: 0;
}

canvas{
    display: block;
    width: 100vw;
    height: 100vh;

}

Случай состоит в том, что я не думаю, что он из-за width: 100vw и height: 100vh, так как у меня есть другая игра, в которой он использует одно из этих двух средств (vh), и не desenfoca в абсолютном, пойди совершенно!, эта другая игра использует средство 100vh. и я поместил ему средство statica в width в пикселях и ничем desenfoca... Nisiquiera текст!, я не понимаю, из-за которого в этом если...

постскриптум: если я использую:

image-rendering: pixelated;

текст и мяч уже не видны desenfocadas, если не, что видятся очень pixelados.

1
задан 18.03.2019, 21:23
1 ответ

Это происходит, потому что ты растягиваешь canvas для того, чтобы он покрыл все окно. Она soluciГіn он:

  1. удаляет эти два правила css:

    width: 100vw; height: 100vh;

  2. использует javascript, чтобы давать высоту и ширину canvas:

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

3. TambiГ©n ты будешь нуждаться в том, чтобы использовать event listener, чтобы обнаруживать, когда окно меняет tamaГ±o (resize), и вновь вычислять tamaГ±o canvas

ГЛАЗ: событие resize взрывается с очень высокой частотой, и это делает это неприспособленным для сложных заданий, как повторно вычисление положений элементов DOM. Чтобы мочь делать это - рекомендуемо использовать mГ©todo setTimeout или requestAnimationFrame, чтобы уменьшать частоту, с которой взрывается событие resize.

setTimeout(function() {
    init();
    addEventListener('resize', init, false);
  }, 15);

, где init() - один funciГіn, что берется за все.

2
ответ дан 02.12.2019, 05:28

Теги

Похожие вопросы