4

[编辑：发送错误报告：收到 closePath 需要弧线的回复->圆图]

所以 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>
4

1 回答 1

2

重要的是要注意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/

这样的结果：

在此处输入图像描述

根据规范，该arc命令将两个点添加到子路径以及它们之间的弧。它不会关闭子路径，并且只会moveTo在当前路径的开头添加一个隐式。IE 和 Firefox 在这里做的是正确的事情。

moveToChrome 是（半）假设弧调用之间的一种，但仅用于填充。

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

于 2013-06-04T19:41:53.867 回答