Question

[编辑：已发送错误报告：已收到回复，表示closePath需要一个圆弧 - ＆gt;圆形图纸]

所以IE需要在形成圆圈的弧上使用closePath，但Chrome / FF可以让你不用：

context.beginPath();
context.arc(100,100,3,0,Math.PI*2,false);
context.closePath();

结束修改

/////////////////////////////////////////////// ////////

此代码应该只是在html画布中显示圆的行和列。

其他人可以确认这在Chrome中显示正常并在IE中显示怪异吗？

如果是这样，任何想法为什么？

我正在运行IE版本：10.0.9200.16540。

这是代码和小提琴：http://jsfiddle.net/m1erickson/P72NM/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    var spacing=15;
    var linespacing=8;
    var radius=3;

    ctx.lineWidth=linespacing;
    ctx.fillStyle="maroon";

    ctx.strokeStyle="red";
    ctx.beginPath();
    for(var row=5;row<canvas.height;row+=spacing*3){
        for(var col=5;col<canvas.width;col+=spacing*3){
            ctx.arc(col,row, 4, 0, 2 * Math.PI, false);
        }
    }    
    ctx.fill();


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 1

重要的是要注意 Chrome在这里不正确。 IE10和Firefox正在遵循规范。

在一个简单的例子中更明显：

ctx.fillStyle = 'rgba(255,0,0,.4)';

ctx.beginPath();
ctx.arc(50,50,20,Math.PI*2, 0);
ctx.arc(50,150,20,Math.PI*2, 0);
ctx.arc(150,100,20,Math.PI*2, 0);

ctx.stroke();
ctx.fill();

http://jsfiddle.net/ZMKEG/

结果如下：

enter image description here

根据规范，arc命令将两个点添加到子路径以及它们之间的弧。它不会关闭子路径，如果它位于当前路径的开头，则仅会添加隐式moveTo。 IE和Firefox正在做正确的事情。

Chrome（半）假设在弧线调用之间有一种moveTo，但仅用于填充。

换句话说，在多个arc命令之间应该有直线，因为Chrome会在stroke()应用时正确显示。 Chrome不支持这些填充行，这是一个错误。

由帆布制作的圆弧在IE10中行为不端，在Chrome中很好 - 确认？

1 个答案: