Ch12 三次贝塞尔曲线
- bezierCurveTo()方法
- 绘制XP壁纸
  - 保存和恢复Canvas状态

Ch12 三次贝塞尔曲线

`bezierCurveTo()`方法

绘制三次贝塞尔曲线代码如下。

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

这个方法可谓是绘制波浪线的神器。根据之前的结论，n阶贝塞尔曲线就有n-1个控制点，所以三次贝塞尔曲线有1个起始点、1个终止点、2个控制点。因此传入的6个参数分别为控制点cp1 (cp1x, cp1y)，控制点cp2 (cp2x, cp2y)，与终止点 (x, y)。

这个方法也是不用大家去掌握参数具体是怎么填的，只要知道参数的意义就行。和quadraticCurveTo()方法一样，bezierCurveTo()的三次贝塞尔曲线网上也能找到互动的网页工具。这里提供一个网页：Canvas Bézier Curve Example，大家可以动手试一下。

绘制XP壁纸

这里我们拿XP的壁纸开刀，来练习一下我们之前学习过的绘制方法。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>XP壁纸</title>
    <style>
        body { background: url("./images/bg3.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
</div>
<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);
        drawPrairie(context);
        drawSky(context);
        for(var i=0; i <5; i++){
            var x0 = 500 * Math.random() + 50;
            var y0 = 200 * Math.random() + 50;
            var c0 = 100 * Math.random() + 50;
            drawCloud(context, x0, y0, c0);
        }
    };
    function drawSky(cxt){
        cxt.save();
        cxt.beginPath();
        cxt.moveTo(0, 420);
        cxt.bezierCurveTo(250, 300, 350, 550, 800, 400);
        cxt.lineTo(800,0);
        cxt.lineTo(0,0);
        cxt.closePath();
        var lineStyle = cxt.createRadialGradient(400, 0, 50, 400, 0, 200);
        lineStyle .addColorStop(0, "#42A9AA");
        lineStyle .addColorStop(1, "#2491AA");
        cxt.fillStyle = lineStyle;
        cxt.fill();
        cxt.restore();
    }
    function drawPrairie(cxt){
        cxt.save();
        cxt.beginPath();
        cxt.moveTo(0, 420);
        cxt.bezierCurveTo(250, 300, 350, 550, 800, 400);
        cxt.lineTo(800,600);
        cxt.lineTo(0,600);
        cxt.closePath();
        var lineStyle = cxt.createLinearGradient(0, 600, 600, 0);
        lineStyle .addColorStop(0, "#00AA58");
        lineStyle .addColorStop(0.3, "#63AA7B");
        lineStyle .addColorStop(1, "#04AA00");
        cxt.fillStyle = lineStyle;
        cxt.fill();
        cxt.restore();
    }
    /*渲染单个云朵
     context:  canvas.getContext("2d")对象
     cx: 云朵X轴位置
     cy: 云朵Y轴位置
     cw: 云朵宽度
     */
    function drawCloud(cxt, cx, cy, cw) {
        //云朵移动范围即画布宽度
        var maxWidth = 800;
        //如果超过边界从头开始绘制
        cx = cx % maxWidth;
        //云朵高度为宽度的60%
        var ch = cw * 0.6;
        //开始绘制云朵
        cxt.beginPath();
        cxt.fillStyle = "white";
        //创建渐变
        var grd = cxt.createLinearGradient(0, 0, 0, cy);
        grd.addColorStop(0, 'rgba(255,255,255,0.8)');
        grd.addColorStop(1, 'rgba(255,255,255,0.5)');
        cxt.fillStyle = grd;
        //在不同位置创建5个圆拼接成云朵现状
        cxt.arc(cx, cy, cw * 0.19, 0, 360, false);
        cxt.arc(cx + cw * 0.08, cy - ch * 0.3, cw * 0.11, 0, 360, false);
        cxt.arc(cx + cw * 0.3, cy - ch * 0.25, cw * 0.25, 0, 360, false);
        cxt.arc(cx + cw * 0.6, cy, cw * 0.21, 0, 360, false);
        cxt.arc(cx + cw * 0.3, cy - ch * 0.1, cw * 0.28, 0, 360, false);
        cxt.closePath();
        cxt.fill();
    }
</script>
</body>
</html>