我创建了以下类型的圆形,并在画布中组合了弧形。它创建得很好,看起来很好。
我的问题:
我的四边有一个黑色边框。
我只想要在圈子外面的边框。我不希望段之间的内部边界或边界。我尝试了很多东西,但他们没有工作。
我尝试了以下内容:
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
但没有成功。希望我能得到很好的解决方案。
我还有另外三个相互连接的圈子(FYI)。
var canvas = document.getElementById("canvas");
var startAngle = 0;
var ctx;
var canvas = document.getElementById("canvas");
var leftValue=250;
var topValue=150;
drawWheel1();
function drawWheel1()
{
if(canvas.getContext)
{
var outsideRadius = 120;
var textRadius = 97;
var insideRadius = 80;
var arc = Math.PI / 6;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle="#3D3D3D";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
for(var i = 0; i < 12; i++)
{
var angle = -(startAngle + i * arc);
ctx.fillStyle = "#029990";
ctx.beginPath();
ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false);
ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.restore();
}
}
}
<canvas id="canvas" width="500" height="580"></canvas>
答案 0 :(得分:3)
制作一条新路径,只会像这样抚摸新路径。
Ext.Viewport.setMenu(menu, {
side: 'left'
});
var canvas = document.getElementById("canvas");
var startAngle = 0;
var ctx;
var canvas = document.getElementById("canvas");
var leftValue = 250;
var topValue = 150;
drawWheel1();
function drawWheel1() {
if (canvas.getContext) {
var outsideRadius = 120;
var textRadius = 97;
var insideRadius = 80;
var arc = Math.PI / 6;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "#3D3D3D";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
for (var i = 0; i < 12; i++) {
var angle = -(startAngle + i * arc);
ctx.fillStyle = "#029990";
ctx.save();
ctx.beginPath();
ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false);
ctx.arc(leftValue, topValue, insideRadius, angle + arc, angle, true);
ctx.fill();
ctx.closePath();
// Close the old path
// Begin a new path
ctx.beginPath();
// Create the arc path
ctx.arc(leftValue, topValue, outsideRadius, angle, angle + arc, false);
// Stroke it
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
}
答案 1 :(得分:1)
实际上你可以绘制两个弧并移除循环。以下是一个有效的简化版本。
var ctx;
var canvas = document.getElementById("canvas");
var leftValue = 250;
var topValue = 150;
drawWheel1();
function drawWheel1() {
if(canvas.getContext) {
var outsideRadius = 120;
var insideRadius = 80;
var arc = Math.PI * 2;
//Initialization
ctx = canvas.getContext("2d");
ctx.lineWidth = 5;
//Draw the outer arc
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.fillStyle = "#029990";
ctx.arc(leftValue, topValue, outsideRadius, 0, arc, false);
ctx.stroke();
ctx.fill();
ctx.closePath();
//Draw the inner arc
ctx.beginPath();
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.arc(leftValue, topValue, insideRadius, arc, 0, true);
ctx.stroke();
ctx.fill();
ctx.closePath();
}
}
&#13;
<canvas id="canvas" width="500" height="580"></canvas>
&#13;