默认情况下，HTML5 Canvas是否在屏幕外渲染

Does HTML5 Canvas render off-screen by default?

本文关键字：屏幕 是否 情况下 HTML5 Canvas 默认      更新时间：2023-09-26

如果我这样做：

    <canvas id="canvas" width="100" height="100">
        <p>Your browser does not support HTML5 Canvas.</p>
    </canvas>

这个：

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.fillRect(150, 150, 10, 20);

矩形会被渲染还是默认情况下会被忽略？

除了查看浏览器的源代码，我认为没有任何方法可以知道。该规范确实给了我们一个提示：

当绘制形状或图像时，用户代理必须遵循这些步骤，按照给定的顺序（或表现得像他们这样）：

将形状或图像渲染到无限透明黑色位图上

注意单词"无限"。因此，规范确实建议浏览器应该渲染超出画布范围的内容。但如果非要我猜测的话，大多数浏览器都会注意到形状在当前剪切区域之外，并放弃调用。没有办法渲染超出画布边界的东西，然后将其"滚动"到视图中，画布对此没有概念。

我创建了这个演示http://jsbin.com/okoful/edit#javascript，html，使用两个画布生活，我得出结论，如果我们在画布之外绘制，它将不会渲染它。

var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
ctx1.fillRect(50, 50, 300, 300);
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
ctx2.translate(0,0);
ctx2.drawImage(ctx1.canvas,0,0);

$（"#debug"）.text（"输出："）；

对于不同的浏览器和不同的绘图命令，它实际上是不同的。

IE9已经聪明起来，如果图像超出画布的范围，就对drawImage调用执行不操作。这在IE9性能分析器中很容易被注意到。

这可能是一个只有当变换矩阵为恒等式时才进行的优化，我没有检查其他情况。

当然，其他浏览器不同！

相关文章：