javascript – 不同像素密度的Html Canvas

我希望有人可以提供帮助,因为我似乎无法找到可靠的解决方案.

是否有一个框架或一般设置来很好地获得html画布渲染,并且在不同的像素密度下具有正确的大小？

我理解为什么这个问题存在.如果以前曾经多次询问过这个问题,我已经非常彻底地进行了搜索,但我仍然没有看到一个强大的解决方案.

附加：为了澄清,画布渲染在视网膜屏幕上看起来模糊,我想有一种方法可以使渲染看起来很清晰,无论它们在哪里被观看.面料框架看起来很棒but their demos still look fuzzy on my retina screen.

解决方法:

如果你看一下,例如three.js source,它实现了这样的大小调整：

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似乎是画布上下文.

看起来他们只是采取宽度和高度(例如屏幕宽度和高度)并将其乘以像素比率,据我所知,这是像1-4之间的某个整数.

标签：javascript,html5,html5-canvas,retina-display
来源： https://codeday.me/bug/20190829/1761396.html