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>

画布无法在IoS移动设备上正常工作

1 个答案: