0

我有一些 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>

4

1 回答 1

1

这是你的问题：

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

<canvas>您正在使用 CSS 宽度和高度而不是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.

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

于 2012-04-16T16:14:50.930 回答