Question

如果我这样做：

    <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);

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

Answer 1

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

绘制形状或图像时，用户代理必须遵循以下步骤：   按照给出的顺序（或表现得如此）：

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

注意'无限'这个词。所以规范确实建议浏览器应该渲染超出画布范围的东西。但是，如果我不得不猜测，大多数浏览器会注意到形状在当前剪切区域之外并且放弃了调用。没有办法渲染超出画布边界的东西然后“滚动”到视图中，画布没有这个概念。

Answer 2

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

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（“输出：”）;

Answer 3

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

如果图像超出画布的界限，IE9已经明智并对drawImage调用进行了无操作。这在IE9性能分析器中很容易注意到。

这可能只是在转换矩阵是标识时才进行优化，我没有另行检查。

其他浏览器当然不同！

HTML5 Canvas默认情况下会在屏幕外渲染吗？

3 个答案: