Я надеюсь, что кто-то может помочь с этим, поскольку я не могу найти надежного решения.

Существуют ли рамки или общие настройки для получения HTML-рендеринга холста красиво и с правильным размером при различной плотности пикселей?

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

ДОПОЛНЕНИЕ: Чтобы уточнить, визуализация холста на экране сетчатки выглядит нечеткой, я подумала, что будет способ сделать рендеринг четким, независимо от того, где он просматривается. Структура структуры выглядит потрясающе , но их демонстрации на моем экране сетчатки выглядят нечетко.

3
Brad 16 Дек 2015 в 13:14

4 ответа

Лучший ответ

Если вы посмотрите, например, на источник Three.js, он реализует изменение размера следующим образом:

this.setSize = function ( width, height, updateStyle ) {

        _width = width;
        _height = height;

        _canvas.width = width * pixelRatio;
        _canvas.height = height * pixelRatio;

        if ( updateStyle !== false ) {

            _canvas.style.width = width + 'px';
            _canvas.style.height = height + 'px';

        }

        this.setViewport( 0, 0, width, height );

    };

this.setViewport = function ( x, y, width, height ) {

        _viewportX = x * pixelRatio;
        _viewportY = y * pixelRatio;

        _viewportWidth = width * pixelRatio;
        _viewportHeight = height * pixelRatio;

        _gl.viewport( _viewportX, _viewportY, _viewportWidth, _viewportHeight );

    };

Где _gl кажется контекстом холста.

Кажется, что они просто берут width и height (как, например, для ширины и высоты экрана) и умножают его на pixel ratio, который является некоторым целым числом между 1-4 как насколько я знаю.

2
Piwwoli 16 Дек 2015 в 10:23

Вот хитрость в устранении проблемы размытого холста на экранах с более высоким разрешением (devicePixelRatio).

Масштабируйте размеры элемента : размеры dpr x css.

Вот как будет выглядеть dpr 2.0

<canvas class="small" width="400" height="400"></canvas> 

CSS

.small {
    width: 200px;
    height: 200px;
}

Используйте Javascript для определения размеров элементов dpr и canvas.

const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect(); // css

Рассчитать новое измерение

canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;

Теперь вы можете использовать классы CSS, правила @media и т. Д., Чтобы установить относительные размеры. Javascript обнаружит размер элемента и dpr и вернет правильный относительный размер.

0
matthew 11 Фев 2019 в 21:46

Создать холст с заданным разрешением

function createCanvas (width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    return canvas;
}
var canvas = createCanvas(1024,1024); // create a canvas that is 1024by1024 pixels

Чтобы добавить его к элементу

var element = document.getElementById("uniqueId");
if(element !== null){
   element.appendChild(canvas);
}
0
Blindman67 16 Дек 2015 в 10:33

Fabricjs реализует взлом масштабирования, чтобы красиво визуализировать холст на экранах с различным соотношением пикселей на экране и «логических пикселей»,

Поскольку вы отметили свой вопрос как масштабирование сетчатки, я думаю, что вы спрашиваете об этом.

Если вы не хотите использовать этот фреймворк, это в основном то, как он работает в чистом javascript (та же самая реализация fabricjs более или менее)

if( window.devicePixelRatio !== 1 ){
          var c = document.getElementById('mycanvas') // your canvas
          var w = c.width, h = c.height;

          // scale the canvas by window.devicePixelRatio
          c.setAttribute('width', w*window.devicePixelRatio);
          c.setAttribute('height', h*window.devicePixelRatio);

          // use css to bring it back to regular size
          c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')

          // set the scale of the context
          c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
 }

Знать, что браузер должен быть включен сетчатки.

Пожалуйста, проверьте, не выглядят ли эти изображения на экране сетчатки иначе. Во-первых, сетчатка включена, во-вторых нет. (знайте, страшные образы)

var c = new fabric.StaticCanvas('canvas');
var c2 = new fabric.StaticCanvas('canvas2', {enableRetinaScaling: false});
fabric.Image.fromURL('http://www.free-desktop-backgrounds.net/free-desktop-wallpapers-backgrounds/free-hd-desktop-wallpapers-backgrounds/535693007.jpg', function(img) {
  img.scale(0.5);
  var circle = new fabric.Circle({radius: 40, fill: 'red', stroke: 'blue', top: 2, left: 2});
  
  c.add(img);
  c.add(circle);
  c2.add(img);
  c2.add(circle);
});
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>

<canvas id="canvas2" width="800" height="600"></canvas>

Ссылка с другой картинкой: http://www.deltalink.it/andreab/fabric/retina.html

< Сильный > Edit: Добавлена векторная геометрическая форма, чтобы увидеть, есть ли еще доказательства.

3
AndreaBogazzi 17 Дек 2015 в 13:23