英文:
WKWebView: how to display a big HTML5 canvas?
问题
屏幕分辨率是2360x1640的iPad上，视口尺寸为1180x820。
如果我设置一个2360x1640的画布，那么在我的WKWebView上只会显示四分之一的画面。
而我必须使用2360x1640的画布。
所以我无法在我的iPad上的WKWebView中显示它。
能否请你帮助我？
问候，
Alex
英文:
Viewport is 1180x820 on iPad, even if screen resolution is 2360x1640.
If I set up a canvas of 2360x1640, only a quarter is displayed on my WKWebView.
And I must have a 2360x1640 canvas.
So I'm not able to display it in my WKWebView on my iPad.
Could you please help me?
Regards,
Alex
答案1
得分: 0
我认为您应该能够使用devicePixelRatio来缩放您的画布。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 2360 * window.devicePixelRatio;
canvas.height = 1640 * window.devicePixelRatio;
canvas.style.width = '2360px';
canvas.style.height = '1640px';
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
ctx.fillRect(0, 0, 100, 100);
ctx.fillRect(2360, 0, 100, 100);
ctx.fillRect(0, 1640, 100, 100);
ctx.fillRect(2360, 1640, 100, 100);
我没有访问iPad，但您可以尝试看看这是否有效。
英文:
I think you should be able to use devicePixelRatio to scale your canvas.
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = 2360 * window.devicePixelRatio
canvas.height = 1640 * window.devicePixelRatio
canvas.style.width = '2360px'
canvas.style.height = '1640px'
ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
ctx.fillRect(0, 0, 100, 100)
ctx.fillRect(2360, 0, 100, 100)
ctx.fillRect(0, 1640, 100, 100)
ctx.fillRect(2360, 1640, 100, 100)
I don't have access to an iPad, but see if this works.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论