logo标签列表

画布绘制和视网膜显示屏：可行吗？

iphonecanvaswebkitretina-display
21

使用PhoneGap实现Canvas绘图

我们在使用Canvas时遇到了一个问题，那就是Canvas需要特定的像素尺寸。虽然iPhone 4的视网膜显示屏从CSS/Webkit的角度来看仍然是320像素宽，但技术上实际上有640个屏幕像素。

有没有办法在Webkit上支持视网膜显示屏，并且与非视网膜显示器兼容呢？

请看我的答案，其中包含一个方便的解决方案... https://dev59.com/s2445IYBdhLWcg3wuspT#19546481 - jondavidjohn
6个回答
47

上周我遇到了同样的问题，并发现了如何解决它 -

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

if (window.devicePixelRatio > 1) {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    canvas.width = canvasWidth * window.devicePixelRatio;
    canvas.height = canvasHeight * window.devicePixelRatio;
    canvas.style.width = canvasWidth + "px";
    canvas.style.height = canvasHeight + "px";

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

在gist上查看完整代码，在jsfiddle上查看演示

4
你能否在其他地方镜像这个网站？那个链接已经失效了。 - Connor McKay
1
请始终将解决方案复制并粘贴到StackOverflow，这样即使该网站脱机也能保持可用。 - kritzikratzi
该网站目前在线，并链接到GitHub上的此示例：https://gist.github.com/joubertnel/870190（我猜它会在线上更长一点时间） - Cas Cornelissen
4
注意：原始代码无法正常工作！我必须将canvas.style.width = canvasWidth + "px"和canvas.style.height设置为相同的方式才能让它正常工作。我已经向问题提交了修改建议。 - wxs
3
有一个即插即用的 polyfill 可以为您处理大多数基本绘图操作，并消除自动为您处理此操作（Safari）和其他不处理此操作的浏览器之间的歧义。 https://github.com/jondavidjohn/hidpi-canvas-polyfill 您只需在绘图代码之前包含它，它应该会自动为您提供良好的 retina 支持。
1
这个 polyfill 会导致我的画布奇怪地增长，每次我绘制到画布上直到最后在 Safari 中几乎让我的标签页崩溃。我想我会尝试手动完成它。 - Jared Updike
@JaredUpdike 听起来像是一个很好的候选人，可以通过提交一个详细的示例的 Github 问题报告来解决这个问题，以便其他人也能够得到修复。 - jondavidjohn
2
另一个选择是从你的HTML中移除这一行，这样你就可以在手机上获得默认的网页视图宽度。在iPhone上应该是980像素。
<meta name='viewport' content='width=device-width' />

然后你只需要这样做：
canvas.width = innerWidth
canvas.height = innerHeight
canvas.style.width = innerWidth+'px'
canvas.style.height = innerHeight+'px'

优点是不需要缩放，渲染速度更快。 但它可能无法匹配设备的物理像素数量。在大多数情况下效果还不错。不会像320像素那样有锯齿。但也没有视网膜屏幕那么清晰。请记住，分辨率越高，延迟越大。
0

WebCode（http://www.webcodeapp.com）是一款矢量绘图应用程序，可以为您生成JavaScript HTML5 Canvas代码。该代码支持Retina显示屏，您可以查看它们的实现方式。

1
这也让我想起了http://code.google.com/p/canvg/。不确定它如何处理视网膜屏幕。 - Jared Updike
0

编辑：刚注意到我发布了错误的演示链接！

视网膜（或其他高分辨率显示器）画布分辨率绝对是可能的。这里有一个可行的示例：

http://spencer-evans.com/share/github/canvas-resizer/

我也遇到过这个问题。被接受的答案代码基本上是正确的，但你也可以使用库解决方案。我编写了一个库来处理智能画布重新调整大小，使元素更具响应性和更高的分辨率（如演示所示）。

https://github.com/swevans/canvas-resizer

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接