Question

我正在使用Canvas创建一个看起来形状的梯形，但我对它很陌生。事实上。这是我第一次使用它。我似乎遇到了我的形状，我不确定如何解决它。有人可以帮忙吗？

我有一个小提琴：http://jsfiddle.net/auwgr/

---编辑---

我意识到我并没有真正对我想要完成的事情作出任何澄清。这是我想要的形状的图像：

enter image description here

有点像（抱歉我的绘画技巧或缺乏绘画技巧）......

谢谢！

Answer 1

您可以使用画布路径绘制圆形梯形。

enter image description here

此路径有4个部分：

top-arc：从左上角到右上角
右线：从顶弧到底弧的右边
底弧：从右下角扫到左下角
左行：关闭左下角和左上角之间的路径。

示例代码和演示：http://jsfiddle.net/m1erickson/kqY8D/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

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

    // the centerpoint of the arc-trapezoid
    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="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();

    // stroke the path

    ctx.stroke();

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

试图用帆布制作一个梯形的形状

1 个答案: