1

如何绘制具有自定义宽度的 2D 贝塞尔曲线 - 类似于丝带？由于特定原因，仅设置 lineWidth 是不够的。

有我可以使用的图书馆吗？我用谷歌搜索了很多，但没有发现任何有用的东西。

编辑：我的问题是三次贝塞尔曲线描边轮廓的副本以及可能如何抵消三次贝塞尔曲线？

4

1 回答 1

2

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

在此处输入图像描述

这是代码和小提琴：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>
于 2013-03-28T16:42:14.200 回答