HTML5畫布上的部分楔形形狀

Question

我想在html5畫布上繪製此形狀。基本上這些弧是連接在一起形成一個封閉的形狀物體。我不介意是否使用KineticJs來實現這一點。

我沒有得到這方面谷歌上什麼。能否請你幫忙？

Answer 1

你的局部楔形多邊形可以使用路徑進行：

甲演示：http://jsfiddle.net/m1erickson/5d2bX/

的路徑包括：

• 開始上繪製所述楔形左上角
• 頂弧掃左至右
• 的線在右側向下移動
• 底部圓弧掃描從右到左
• 一個closePath命令，將自動繪製從線左下到左上

這裏是什麼樣子的代碼：

// canvas references 
var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 

// the centerpoint of the partial wedge 
var cx=150; 
var cy=150; 

// the inside and outside radii 
var insideRadius=60; 
var outsideRadius=100; 

// the beginning and ending angles 
var beginningAngle=Math.PI*5/4; 
var endingAngle=Math.PI*7/4; 

// use trigonometry to calculate the starting point 
// of the bottom leftward sweeping arc 
var x=cx+insideRadius*Math.cos(endingAngle); 
var y=cy+insideRadius*Math.sin(endingAngle); 

// set the path style 
ctx.strokeStyle="black"; 
ctx.fillStyle="red"; 
ctx.lineWidth=2; 

// begin the path 

ctx.beginPath(); 

// top-arc: sweeping from top-left to top-right 

ctx.arc(cx,cy,outsideRadius,beginningAngle,endingAngle); 

// right-line: from the end of top-arc to the right of bottom-arc 

ctx.lineTo(x,y); 

// bottom-arc: sweeping from bottom-right to bottom left 
// (Note: the true on the end causes the arc to sweep right to left 

ctx.arc(cx,cy,insideRadius,endingAngle,beginningAngle,true); 

// left-line: closes the path between the 
// bottom-left and top left arcs. 

ctx.closePath(); 

// fill & stroke the path 
ctx.fill(); 
ctx.stroke();