Question

简单切割n贴，并在FF＆amp; IE8（在我的情况下）将显示我的问题。

有3个圆圈：

1＆amp;在FF中2重叠确定。 1＆amp; 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>

Answer 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();           
}

画布重叠圆圈问题

1 个答案: