移动 Chrome HTML 画布宽度限制答案

【问题标题】：Mobile Chrome HTML canvas width limit移动 Chrome HTML 画布宽度限制
【发布时间】：2013-05-21 06:35:57
【问题描述】：

我试图在画布宽度更改后在 HTML 画布上显示线条。在 PC 代码上的所有浏览器上工作正常并且行是可见的，但在 Android 4.1.1 上的 Chrome 上 - 行不可见。这是这段代码：

$( function()
{
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    canvas.width = 439;

    context.clearRect(0,0, canvas.width, canvas.height);
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(1000, 1000);
    context.stroke(); 
} );

如果您将画布宽度更改为 438，则在移动色度线上也可见：

http://jsfiddle.net/dGs4F/

那么，Chrome 有问题还是我错过了什么？这两个例子中的线看起来相同并不重要，问题是这条线在移动 Chrom 上是不可见的：/

我的 Chrome 的详细信息：

包版本：1453090
包版本名称：27.0.1453.90
设备：rk30sdk
SDK 版本：16
发布：4.1.1
增量版本：eng.root.20121102.171658
代号：REL

而且我确信我的代码适用于以前版本的 Chrome。上次 Chrome 更新后，此代码不起作用。

【问题讨论】：

你试过把context.closePath()放在context.stroke()之后吗？某些浏览器可能需要它。

标签： android google-chrome html5-canvas

【解决方案1】：

由于画布的 2D 加速（更大的画布会自动加速），这是 Android 中最新 Chrome 的一个已知问题。幸运的是正在调查：

https://code.google.com/p/chromium/issues/detail?id=231082

【讨论】：

只是补充一下，它不会影响每个设备 - 我在我的 N4 上试过这个，它工作正常。