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