Bézier curve(貝塞爾曲線)是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。曲線定義：起始點(diǎn)、終止點(diǎn)、控制點(diǎn)。通過調(diào)整控制點(diǎn)，貝塞爾曲線的形狀會(huì)發(fā)生變化。 1962年，法國(guó)數(shù)學(xué)家Pierre Bézier第一個(gè)研究了這種矢量繪制曲線的方法，并給出了詳細(xì)的計(jì)算公式，因此按照這樣的公式繪制出來的曲線就用他的姓氏來命名，稱為貝塞爾曲線。

這里我們不介紹計(jì)算公式，只要知道貝塞爾曲線是一條由起始點(diǎn)、終止點(diǎn)和控制點(diǎn)所確定的曲線就行了。而n階貝塞爾曲線就有n-1個(gè)控制點(diǎn)。用過Photoshop等繪圖軟件的同學(xué)應(yīng)該比較熟悉，因?yàn)槠渲械匿摴P工具設(shè)置錨點(diǎn)繪制路徑的時(shí)候，用到的就是貝塞爾曲線。下圖就是五階貝塞爾曲線的繪制過程。

五階貝塞爾曲線

是不是非常的酷炫？

二次貝塞爾曲線

都介紹了五次貝塞爾曲線，那二次的肯定不在話下了。大家一定能想象出它長(zhǎng)啥樣。沒錯(cuò)，就是下面這樣。

二次貝塞爾曲線

在Canvas里，二次貝塞爾曲線的方法如下。

context.quadraticCurveTo(cpx,cpy,x,y);

這里和acrTo()有異曲同工之妙。P0是起始點(diǎn)，所以通常搭配moveTo()或lineTo()使用。P1(cpx, cpy)是控制點(diǎn)，P2(x, y)是終止點(diǎn)，它們不是相切的關(guān)系。什么關(guān)系呢？如果偏要問，我只好給出下面的公式……

貝塞爾曲線一般函數(shù)式

這么復(fù)雜的函數(shù)式，那我們繪圖時(shí)，quadraticCurveTo(cpx,cpy,x,y)的參數(shù)怎么填？很簡(jiǎn)單，可以簡(jiǎn)單調(diào)試直至得到你想要的效果?；蛘呤褂靡恍┕ぞ?。

這里我提供一個(gè)很不錯(cuò)的在線轉(zhuǎn)換器，界面如下。

二次貝塞爾曲線在線轉(zhuǎn)換器

這里我把三個(gè)控制點(diǎn)調(diào)好，變成一個(gè)大山的形狀，右側(cè)自動(dòng)生成了代碼，我們只要復(fù)制就行了。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>二次貝塞爾曲線</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？！趕快換一個(gè)吧??！
    </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);

        context.lineWidth = 6;
        context.strokeStyle = "#333";
        context.beginPath();
        context.moveTo(60, 337);
        context.quadraticCurveTo(256, 43, 458, 336);
        context.stroke();
    };

</script>
</body>
</html>

演示 11-1

運(yùn)行結(jié)果：

二次貝塞爾曲線

這樣我們把在線轉(zhuǎn)換工具里的貝塞爾曲線搬進(jìn)我們自己的畫布里了，是不是非常的酷？大家如果有特別難的曲線沒法用arcTo()繪制，就可以嘗試一下使用這個(gè)工具繪制貝塞爾曲線。

本節(jié)的內(nèi)容非常少，童鞋們不要停下腳步，整理好行裝，一并把最終BOSS——三次貝塞爾曲線消滅掉！打敗他之后，我們就是初級(jí)藝術(shù)家了，是不是非常的興奮？讓我們繼續(xù)前進(jìn)！

上一篇：Ch4 多線條組成圖形下一篇：Ch8 填充樣式

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Ch11 二次貝塞爾曲線

貝塞爾曲線

二次貝塞爾曲線