画布重叠圆圈问题答案

【问题标题】：Canvas overlapping circles problem画布重叠圆圈问题
【发布时间】：2010-11-23 19:18:31
【问题描述】：

在 FF 和 IE8（在我的情况下）中进行简单的剪切和粘贴和比较将显示我的问题。

有3个圆圈：

1 和 2 在 FF 中重叠正常。 1 & 2 在 IE8 中不能重叠。第三个圆圈在两个浏览器中都有一个奇怪的三角形。

我的问题是我怎样才能有 3 个重叠的实心圆圈？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<!-- canvas fix for IE -->
<!--[if IE]><script type="text/javascript" src="scripts/excanvas.js"></script><![endif]-->
<!-- HTML5 fix for IE -->
<link href="css/suxperbo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" >
function drawClouds() {

var canvas=document.getElementById('theCanvas1');
var context=canvas.getContext('2d');

context.fillStyle="#f90";

context.arc(50,50, 50,0,Math.PI*2, true);
context.arc(100,50, 50,0,Math.PI*2, true);
context.arc(200,100, 50,0,Math.PI*2, true);
context.fill();
}
</script>
</head>
<body onLoad="drawClouds()">
<div class="canvasHolder">
<canvas id="theCanvas1" width="1000" height="500"></canvas>
</div>
</body>
</html>

【问题讨论】：

对不起，我大学毕业后不再做作业了:)。

标签： html canvas

【解决方案1】：

简单...

这三个弧都是一条路径的一部分，在开始下一个之前用 closePath() 关闭每个弧。

var drawClouds = function(){
    var canvas = document.getElementById('theCanvas1');
    var context = canvas.getContext('2d');
    context.fillStyle = "#f90";
    context.arc(50, 50, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.arc(100, 50, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.arc(200, 100, 50, 0, Math.PI * 2, true);
    context.fill();           
}

【讨论】：

谢谢，这回答了我正要问的一个问题，你省了麻烦