我希望有人在那里可以帮助这一点,因为我似乎无法找到一个固溶体。
是否有一个框架或一般设置获得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
似乎是在画布背景。
好像他们只是采取了width
和height
(如在屏幕宽度和高度的例子),并用pixel ratio
,这就好比是1-4之间的整数部分,据我所知相乘。
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);
}
要知道,一个浏览器,必须启用视网膜。
请检查这些图片看起来你的视网膜屏幕上的不同。首先是视网膜启用,SECONDO没有。 (要知道,可怕的图像)
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
编辑:增加了向量的几何形状,看是否有更多的证据。
要创建具有给定分辨率的画布
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);
}
这是使用方法以更高的DPI(devicePixelRatio)屏幕固定模糊帆布问题。
缩放画布元件尺寸:DPR X CSS尺寸。
下面是2.0 DPR是什么样子
<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和返回正确的相对大小。