在画布上圈出一边的边框

时间:2015-09-17 18:07:55

标签: javascript html css html5 canvas

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

我的问题:

我的四边有一个黑色边框

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

我尝试了以下内容:

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>

2 个答案:

答案 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)

实际上你可以绘制两个弧并移除循环。以下是一个有效的简化版本。

&#13;
&#13;
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;
&#13;
&#13;