关于html5 canvas
0
悬赏园豆：10
[已关闭问题]
关闭于 2012-11-20 16:08
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
window.onload = function () {
var cvs = document.getElementById("Canvas1");
var ctx = cvs.getContext("2d");
ctx.globalCompositeOperation = "xor";
ctx.beginPath();
ctx.fillStyle = "red";
ctx.moveTo(250, 250);
ctx.arc(250, 250, 100, Math.PI / 6, Math.PI / 3, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(250, 250);
ctx.arc(250, 250, 50, Math.PI / 6, Math.PI / 3, false);
ctx.fill();
}
</script>
</head>
<body>
<canvas id="Canvas1" width="500" height="500"></canvas>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
window.onload = function () {
var cvs = document.getElementById("Canvas1");
var ctx = cvs.getContext("2d");
ctx.globalCompositeOperation = "xor";
ctx.beginPath();
ctx.fillStyle = "red";
ctx.moveTo(250, 250);
ctx.arc(250, 250, 100, Math.PI / 6, Math.PI / 3, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(250, 250);
ctx.arc(250, 250, 50, Math.PI / 6, Math.PI / 3, false);
ctx.fill();
}
</script>
</head>
<body>
<canvas id="Canvas1" width="500" height="500"></canvas>
</body>
</html>
如何去除边框，只要红色部分。
所有回答(1)
0
你贴下完整的代码，用你的JS在chrome运行起来没有效果
代码已贴上了。
@ML Guo: 伪造了一个：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script> window.onload = function () { var cvs = document.getElementById("Canvas1"); var ctx = cvs.getContext("2d"); ctx.globalCompositeOperation = "xor"; ctx.beginPath(); ctx.fillStyle = "red"; ctx.moveTo(250, 250); ctx.arc(250, 250, 100, Math.PI / 6, Math.PI / 3, false); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "black"; ctx.moveTo(250, 250); ctx.arc(250, 250, 50, Math.PI / 6, Math.PI / 3, false); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "white"; ctx.moveTo(250, 250); ctx.arc(250, 250, 50, Math.PI /20, Math.PI / 2, false); ctx.fill(); } </script> </head> <body> <canvas id="Canvas1" width="500" height="500"></canvas> </body> </html>
@chenping2008: 这种方式我试过，如果只有一个的还好，但是我要是实现的是一个圆环，类似http://www.microsoft.com/Investor/EarningsAndFinancials/Financials/fy13/q1/SegmentRevenues.aspx 这个页面中的。
如果用一个大角度的覆盖的话，做动画时会对其他的图形产生覆盖
