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

2023年3月1日 240次阅读

[编辑：发送错误报告：收到回复,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>

最佳答案 重要的是要注意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正在做正确的事情.

Chrome(半)假设在弧线调用之间有一种移动,但仅用于填充.

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

点赞