Question

我怎么能用自定义宽度绘制2D贝塞尔曲线 - 像丝带？由于特定原因，仅设置lineWidth是不够的。

我可以使用图书馆吗？我已经google了很多，但没有找到任何有用的东西。

编辑：我的问题与Outline of cubic bezier curve stroke和How to offset a cubic bezier curve?

重复

Answer 1

以下是用于形成单个贝塞尔曲线形状的贝塞尔曲线的组合。

enter image description here

这是代码和小提琴：http://jsfiddle.net/m1erickson/rCMdX/

<!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(){

    var canvas1=document.getElementById("canvas1");
    var ctx1=canvas1.getContext("2d");
    var canvas2=document.getElementById("canvas2");
    var ctx2=canvas2.getContext("2d");

    drawUniformRibbon(50,50,100,35,175,175,350,100,8);
    drawVariableRibbon(50,50,75,25,175,175,350,100,8,18);

    function drawUniformRibbon(x1,y1,cx1,cy1,cx2,cy2,x2,y2,width){
      ctx1.fillStyle = "red";  
      ctx1.beginPath();  
      ctx1.moveTo(x1, y1-width);  
      ctx1.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2+width);
      ctx1.lineTo(x2, y2+width*2);  
      ctx1.bezierCurveTo(cx2, cy2+width, cx1, cy1+width, x1, y1);
      ctx1.lineTo(x1, y1);
      ctx1.closePath();  
      ctx1.fill();
      ctx1.stroke(); 
    }

    function drawVariableRibbon(x1,y1,cx1,cy1,cx2,cy2,x2,y2,startWidth,endWidth){
      ctx2.fillStyle = "yellow";  
      ctx2.beginPath();  
      ctx2.moveTo(x1, y1-startWidth);  
      ctx2.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
      ctx2.lineTo(x2, y2+endWidth);  
      ctx2.bezierCurveTo(cx2, cy2, cx1, cy1, x1, y1+startWidth);
      ctx2.lineTo(x1, y1);
      ctx2.closePath();  
      ctx2.fill();
      ctx2.stroke(); 
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas1" width=400 height=200></canvas><br/>
    <canvas id="canvas2" width=400 height=200></canvas>
</body>
</html>

Bezier曲线与自定义宽度 - 功能区

1 个答案: