Question

小提琴示例：

设备规格：

Chrome 72.0.3626.105 Android 6.0.1; Nexus 7 Build / MOB30X

在这个小提琴上，我创建了两个画布并绘制了一些圆圈。第一个画布的宽度为115，第二个画布的宽度为439。在大多数设备和浏览器上，圆圈是相同的。在运行于Android的上述版本的Chrome上，较小的画布（最左边的圆圈）中的圆圈呈现正确，而较大的画布（最右边的三个圆圈）中的圆圈呈现奇怪。这是我的Nexus 7的屏幕截图：

线条和正方形等似乎在两个画布之间呈现几乎相同的效果。现在，如果将第二个画布的宽度更改为438，它将正确渲染。实际上，任何小于或等于438的宽度都将正确绘制圆形，而大于或等于439的任何宽度将使圆形绘制不正确。

有人知道这里发生了什么吗？我敢肯定，这是Android版Chrome的最新版本。这使我发疯了一段时间。在运行相同版本的Chrome的其他Android手机上，它可以正常显示。

<html>
    <head><style>* {margin:0; padding:0;}</style></head>
    <body>
    </body>
</html>

<script>

    var canvas1 = document.createElement("CANVAS");
    canvas1.width = 115
    var ctx1 = canvas1.getContext("2d");

    ctx1.strokeStyle = "red";
    ctx1.fillStyle = 'green';
    ctx1.beginPath();
    ctx1.lineWidth = 1;
    ctx1.arc(60, 60, 50, 0, 2 * Math.PI);
    ctx1.strokeRect(50, 50, 40, 40);
    ctx1.fillRect(60, 60, 20, 20);
    ctx1.moveTo(10, 10);
    ctx1.lineTo(40, 40);
    ctx1.lineTo(10, 80);
    ctx1.stroke();
    document.body.appendChild(canvas1);

    var canvas2 = document.createElement("CANVAS");        // Create a <button> element
    canvas2.width = 439

    var ctx = canvas2.getContext("2d");

    ctx.strokeStyle = "red";
    ctx.fillStyle = 'green';

    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.arc(60, 60, 50, 0, 2 * Math.PI, true);
    ctx.fillRect(60, 60, 20, 20);
    ctx.strokeRect(50, 50, 40, 40);
    ctx.moveTo(10, 10);
    ctx.lineTo(40, 40);
    ctx.lineTo(10, 80);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.arc(170, 60, 50, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.arc(280, 60, 50, 0, 2 * Math.PI);
    ctx.stroke();

    document.body.appendChild(canvas2);                    // Append <button> to <body> 
</script>

Android Chrome HTML Canvas Arc Bug

0 个答案: