[html5/css3] html5 canvas api--贝塞尔曲线

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

--《百度百科》

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html5 canvas-贝济埃曲线</title>
    <script>
 /**
  *   CanvasRenderingContext2D接口的属性和方法:
  *
  *  interface CanvasRenderingContext2D {
    miterLimit: number;
    font: string;
    globalCompositeOperation: string;
    msFillRule: string;
    lineCap: string;
    msImageSmoothingEnabled: boolean;
    lineDashOffset: number;
    shadowColor: string;
    lineJoin: string;
    shadowOffsetX: number;
    lineWidth: number;
    canvas: HTMLCanvasElement;
    strokeStyle: any;
    globalAlpha: number;
    shadowOffsetY: number;
    fillStyle: any;
    shadowBlur: number;
    textAlign: string;
    textBaseline: string;
    restore(): void;
    setTransform(m11: number, m12: number, m21: number, m22: number, dx: number, dy: number): void;
    save(): void;
    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
    measureText(text: string): TextMetrics;
    isPointInPath(x: number, y: number, fillRule?: string): boolean;
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    putImageData(imagedata: ImageData, dx: number, dy: number, dirtyX?: number, dirtyY?: number, dirtyWidth?: number, dirtyHeight?: number): void;
    rotate(angle: number): void;
    fillText(text: string, x: number, y: number, maxWidth?: number): void;
    translate(x: number, y: number): void;
    scale(x: number, y: number): void;
    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
    lineTo(x: number, y: number): void;
    getLineDash(): Array<number>;
    fill(fillRule?: string): void;
    createImageData(imageDataOrSw: any, sh?: number): ImageData;
    createPattern(image: HTMLElement, repetition: string): CanvasPattern;
    closePath(): void;
    rect(x: number, y: number, w: number, h: number): void;
    clip(fillRule?: string): void;
    clearRect(x: number, y: number, w: number, h: number): void;
    moveTo(x: number, y: number): void;
    getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
    fillRect(x: number, y: number, w: number, h: number): void;
    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
    drawImage(image: HTMLElement, offsetX: number, offsetY: number, width?: number, height?: number, canvasOffsetX?: number, canvasOffsetY?: number, canvasImageWidth?: number, canvasImageHeight?: number): void;
    transform(m11: number, m12: number, m21: number, m22: number, dx: number, dy: number): void;
    stroke(): void;
    strokeRect(x: number, y: number, w: number, h: number): void;
    setLineDash(segments: Array<number>): void;
    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
    beginPath(): void;
    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
    createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
}
  *
  * */
        function draw(){
            var bezier=document.getElementById("bezier");
     if (bezier==null){
         return;
     }
            var  context = bezier.getContext("2d");

            context.fillStyle="#12ccab";
            context.fillRect(0,0,350,350);

            var n=0;
            var $m = 160;
            var $n=160;
            var $s = 100;
            context.beginPath();
            /**
             * ,Composite(组合),就是对你在绘图中,后绘制的图形与先绘制的图形之间的组合显示效果,比如在国画中,
             * 你先画一笔红色,再来一笔绿色,相交的部分是一种混色,而在油画中,绿色就会覆盖掉相交部分的红色,
             * 这在程序绘图中的处理就是Composite,Canvas API
             * 中对应的函数就是globalCompositeOperation,跟globalAlpha一样,
             * 这个属性是全局的,所以在使用的时候要注意save和restore.
             *
             * 关于这个属性有更详细的解释:
             *
             *  http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html
             * */
            context.globalCompositeOperation="and";
            context.fillStyle="rgb(100,210,12);";

            var $x= Math.sin(0);
            var $y=Math.cos(0);
            var $d =Math.PI/15*11;
            context.moveTo($m,$n);
            for (i=0;i<30;i++){

                var $x=Math.sin(i*$d);
                var $y=Math.cos(i*$d);
                /**
                 * bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)共有六个参数
                 * cp1x,cp1y:第一个控制点的横纵坐标,
                 * cp2x,cp2y:第二个控制点的横纵坐标,
                 * x,y ：贝济埃曲线终点的横纵坐标
                 *
                 */
                context.bezierCurveTo($m+$x*$s,$n+$y*$s-100,$m+$x*$s+100,$n+$y*$s,$m+$x*$s,$n+$y*$s);

            }
            context.closePath();
            context.fill();
            context.stroke();
        }


    </script>
</head>
<body onload="draw();">

<!--
更高端的贝济埃曲线可以参考:
http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html#2975647

-->

 <canvas id="bezier" width="400" height="400" >
不支持canvas!


 </canvas>

</body>
</html>

关于globalCompositeOperation属性详细解释:

http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html

http://book.2cto.com/201304/19774.html

更高端大气上档次的贝济埃曲线示例:

http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html#2975647