Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 javascript使用bezierCurve To绘制贝塞尔曲线

javascript使用bezierCurve To绘制贝塞尔曲线

发布时间:2015-02-12   编辑:www.jquerycn.cn
本文介绍下,javascript中使用bezierCurve To绘制贝塞尔曲线的例子,该方法可以说是lineTo的曲线版,有需要的朋友参考下。

在javascript中绘制贝塞尔曲线时,要使用“bezierCurveTo”方法。
此方法可以看作是lineTo的曲线版,将从当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。

效果图:
bezierCurve To 贝塞尔曲线

例子,bezierCurve To绘制贝塞尔曲线:
 

复制代码 代码示例:
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script>
    function draw(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) return false;
        var context = canvas.getContext('2d');
        context.fillStyle = "#EEEEFF";
        context.fillRect(0, 0, 400, 300);
        var n = 0;
        var dx = 170;
        var dy = 150;
        var s = 140;
        context.beginPath();
        context.globalCompositeOperation = 'and';
        context.fillStyle = '#1ca40e';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        context.moveTo(dx, dy);
        for (var i = 0; i < 30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
        }
        context.closePath();
        context.fill();
        context.stroke();
    }
</script>
</head>
<body onLoad="draw('canvas');">
<canvas id="canvas" width="400" height="300"/>
</body>
</html>

代码说明:
1、context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
绘制贝塞尔曲线时,需要两个控制点。
cp1x,cp1y为第一个控制点坐标,cp2x,cp2y为第二个控制点坐标。x,y为贝塞尔曲线终点坐标。
除了在canvas画布中用“bezierCurveTo”方法绘制贝塞尔曲线之外,还可以使用quadraticCurveTo方法来为当前路径绘制二次样条曲线。

2、quadraticCurveTo(cpx,cpy,x,y)
cpx,cpy为控制点为坐标,x,y为二次样条曲线终点的坐标。

您可能感兴趣的文章:
javascript使用bezierCurve To绘制贝塞尔曲线
jQuery图表插件 moochart
Raphael一个用于在网页中绘制矢量图形的Javascript库
js图表组件highcharts简介
javascript moveTo与lineTo绘制复杂图形的例子
Highcharts教程(8) Pane窗格选项、PlotOptions绘图选项概览
Highcharts绘制直线图的示例代码
jQuery绘图插件 jqPlot
jQuery 绘图插件 jCanvas
JavaScript图表绘制组件 Elycharts

[关闭]