HTML5 画布未更新：浏览器错误还是我做错了什么？答案

【问题标题】：HTML5 canvas not updating: browser bug or am I doing something wrong?HTML5 画布未更新：浏览器错误还是我做错了什么？
【发布时间】：2012-04-16 15:58:31
【问题描述】：

我有一些 HTML 5 代码，它以两个黑色画布开始，然后通过为每一行绘制一条红线来一次更新一行画布。它应该看起来像一个从黑色背景上垂下来的红色窗帘。

奇怪的是，起初它看起来像是随机行（比如 5%）被跳过并留下黑色。我以为我有一个错误。但后来我注意到，如果我调整浏览器窗口的大小，黑线都会变成红色。所以我认为这是某种浏览器重绘错误。然后我注意到 Chrome 和 Safari 都有这种行为。

那么你认为这两个浏览器有相同的错误还是我做错了什么？

有趣的是，如果两个画布都使用 style="width:100%; height:100%"，这个问题就会消失。

<html>
<table>
    <tr>
        <td><canvas id="myCanvas1" style="width:100%; height:100%"></canvas></td>
        <td><canvas id="myCanvas2" style="width:200px; height:400px"></canvas></td>
    </tr>
</table>
<script type="text/javascript">
    var canvases = [document.getElementById("myCanvas1"), document.getElementById("myCanvas2")];

    for(var i = 0; i < canvases.length; i++) {
        var canvas = canvases[i];
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    function updateRow(rowNum) { 

        var done = true;
        for(var i = 0; i < canvases.length; i++) {
            var canvas = canvases[i];

            if(rowNum >= canvas.height) {
                return;
            }
            done = false;

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

            var imageDataForRow = ctx.getImageData(0, rowNum, canvas.width, 1);

            for(var offset = 0; offset < imageDataForRow.data.length; offset += 4) {
                imageDataForRow.data[offset] = 255;
                imageDataForRow.data[offset + 1] = 0;
                imageDataForRow.data[offset + 2] = 0;
                imageDataForRow.data[offset + 3] = 255;
            }

            ctx.putImageData(imageDataForRow, 0, rowNum);
        }

        if(!done) {
            var paintNextRow = function() {
                updateRow(rowNum + 1);
            }
            setTimeout(paintNextRow, 1);
        }
    }

    updateRow(0);

</script>

【问题讨论】：

Chrome、Safari = 是。 Firefox = 否。IE = 甚至不会呈现（可能与手头的问题无关）。

标签： javascript html canvas

【解决方案1】：

这是你的问题：

<canvas id="myCanvas1" style="width:100%; height:100%">

您正在使用 CSS 宽度和高度而不是 <canvas> html 属性设置画布的宽度和高度。您实际上是在拉伸一个 300x150（默认）大小的画布，使其在整个屏幕上倾斜。

您需要在画布标签中定义宽度/高度：<canvas width="500" height="500">

或在代码中：

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;

而不是 CSS。如果你这样做了：

<canvas style="width: 500px; height: 500px;">

然后您将拥有一个 300x150 的画布（默认大小），该画布被缩放/扭曲为 500x500，这几乎肯定是您得到的。

您似乎希望动态更改画布宽度。这没关系，但你必须做几件事之一。一种方法是使用窗口的onresize 事件，并在每次发生这种情况时将画布宽度设置为等于div 的clientWidth（当然，如果clientWidth 发生了变化）。另一种是做一个简单的通用计时器，每半秒左右检查一次相同的事情，并将canvas.width设置为等于div.style.clientWidth。

（我写了上面的手绘，所以可能有错字，但你明白了）

【讨论】：

有趣。不知道100％会是一个延伸。更改为 width="500" height="500" 解决了这个问题。假设我想做一个伸展运动（我不想），我仍然认为黑线可以被认为是一个错误。如何将红线拉伸成黑线？
它是试图在黑色背景上拉伸红线造成的视觉伪影，它不能保证倾斜的线条不会让某些背景（黑色画布）显示出来。