在画布上圈出一边的边框 [英] One side border to circle in canvas

问题描述

我创建了以下类型的圆圈，并在画布中组合了弧线。它创建得很好，看起来很好。

I have created the following type of circle with combining arc in canvas. It is created properly and looks good.

我的问题：

我周围有一个黑色边框弧形，四边都是。

I have a black border around the arc which is on all four sides.

我只想要在圆圈外面的边框。我不希望段之间的内部边界或边界。我尝试了很多东西，但他们没有工作。

I want only the border that is on the outside of the circle. I do not want the inside border or borders between between the segments. I tried lots of things but they have not worked.

我尝试了以下内容：

ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);

但没有成功。希望我能得到很好的解决方案。

But didn't succeed. Hope I got good solution for that.

我还有另外3个圈子相互连接（FYI）。

I have 3 other circle which are connected with each other(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>

推荐答案

创建一条新路径，只会像这样抚摸新路径。

Make a new path and only stroke the new one like so.

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

<canvas id="canvas" width="500" height="580"></canvas>

这篇关于在画布上圈出一边的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！