javascript - Canvas 在 IoS 移动设备上无法正常工作

Question

这里有人遇到过这种问题吗？出于某种原因，canvas arc() 在 Iphone 上不起作用，但在 Android 上运行良好。是否存在浏览器支持问题，或者我只是遗漏了什么？

    width = Math.max(elem.offsetParent.offsetWidth),
    height = Math.max(elem.offsetParent.clientHeight);
var body = document.body, html = document.documentElement,
    docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth),
    docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);


var ct = document.getElementById("cv");
var ctx = ct.getContext('2d');   
ct.width = docWidth; 
ct.height = docHeight;

//ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
ctx.fillStyle = "rgba(234, 70, 195 , 0.7)";
ctx.beginPath();
ctx.arc(width - elem.offsetWidth - 5, docHeight - height + elem.offsetTop + 25, 50, 0, 2 * Math.PI);
ctx.rect(width, 0,-docWidth, docHeight);
ctx.fill();
ctx.stroke();```

Answer 1

因为 document.documentElement 不被 Safari IOS 完全支持。您可以在浏览器兼容性上查看 https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement .我建议检查 width-elem.offsetWidth - 5, docHeight - height + elem.offsetTop ，以确保这些变量都可用。

你是指下面的效果吗？

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

ctx.beginPath();
ctx.fillStyle = "rgba(234, 70, 195 , 0.7)";
ctx.rect(0, 0,100, 100);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(50,50, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

<canvas id="canvas" width="150" height="150"></canvas>