html5 Canvas畫圖教程(7)—canvas里畫曲線之quadraticCurveTo方法

字號:


    繼續(xù)講canvas中畫曲線的方法,今天講quadraticCurveTo。 
    說實話這個方法有點嚇人,單從函數(shù)名稱上都可以初體驗。話說,我覺得有必要把這個函數(shù)名縮短。 
    quadratic的意思是二次,即數(shù)學(xué)中二次元方程那個二次。而ctx.quadraticCurveTo的參數(shù)如下: 
    代碼如下:
    ctx.quadraticCurveTo(x1,y1,x,y); 
    其中x,y是終點的坐標(biāo),而x1,y1是曲線控制點的坐標(biāo)?什么?你問我起點在哪里?起點在此之前用moveTo確定。 
    我之所以把控制點的坐標(biāo)帶上序號1,是因為后面講的某個畫曲線的函數(shù)有兩個控制點,也就有x2,y2了,所以這里先打個預(yù)防針。 
    我們由moveTo確定的起點和quadraticCurveTo自身確定的終點,可以連接成一條直線,由于quadraticCurveTo只有一個控制點,這個控制點不是在直線左邊,就是在直線右邊,所以,quadraticCurveTo永遠(yuǎn)只能畫弧線,還是畫不出S形。 
    為了便于理解,我還是沿用上一篇文章的畫輔助線的方法。初步代碼如下: 
    代碼如下:
    var x1=350, 
    y1 = 250, 
    x = 400, 
    y = 500; 
    ctx.beginPath(); 
    ctx.strokeStyle="#000"; 
    ctx.moveTo(300,300); //起點 
    ctx.quadraticCurveTo(x1,y1,x,y); //正牌曲線 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.strokeStyle = "rgba(255,0,0,0.5)"; 
    ctx.moveTo(300,300); 
    ctx.lineTo(x1,y1);//本行與下一行是畫控制點的線 
    ctx.lineTo(x,y); 
    ctx.moveTo(300,300);//開始連接曲線的起點和終點 
    ctx.lineTo(x,y); 
    ctx.stroke(); 
    這里我畫了兩條輔助線,一條是起點與終點的連接線,一條是起點到控制點再到終點的輔助線(其實是兩條),這兩條線的交匯點就是quadraticCurveTo的控制點坐標(biāo)。 
    名單
    quadraticCurveTo也只能畫弧形的曲線,不過這個弧形可以很不規(guī)則,相比arc和arcTo,也算是一個進步了。 
    另外,quadraticCurveTo也不會像arcTo一樣,出現(xiàn)反轉(zhuǎn)的情況。 
    當(dāng)然,如果你把控制點拉得非常遠(yuǎn),可能圖形也會變得讓你不認(rèn)識。我們來試一下: 
    “y1 = 950; 
    ”我只是把y1改大了一些,然后曲線就超出canvas的范圍了。 
    名單
    不過,quadraticCurveTo畫出的曲線的范圍,永遠(yuǎn)無法達(dá)到或超過控制點的坐標(biāo),我們只有把控制點“控制”好,就不用擔(dān)心了。 
    我寫了一個簡單的可以動的示例頁,展示了quadraticCurveTo畫曲線的過程,希望能幫你加深理解: 
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
     <meta charset="UTF-8">
     <title>Canvas學(xué)習(xí)--quadraticCurveTo畫曲線</title>
     <style type="text/css">
     canvas {box-shadow: 0 0 10px rgba(0,0,0,0.2) }
     </style>
    </head>
    <body>
     <canvas id="cvs" width="800" height="600">不支持canvas</canvas>
    </body>
    <script type="text/javascript"> 
    var cvs = document.getElementById('cvs'); //畫布
    var ctx = cvs.getContext('2d'); // 畫筆
    // ctx.closePath();
    var x1=350,
     y1 = 250,
     x2 = 440,
     y2 = 550,
     x = 400,
     y = 500;
    var fan = 1,fan1 = 1; 
    function draw () {
     ctx.clearRect(100,100,600,600);
     ctx.beginPath();
     ctx.strokeStyle="#000";
     ctx.moveTo(300,300);
     ctx.quadraticCurveTo(x1,y1,x,y);
     ctx.stroke();
     /*ctx.beginPath();
     ctx.strokeStyle = "rgba(0,255,0,1)"
     ctx.moveTo(300,300);
     ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
     ctx.stroke();*/
     ctx.beginPath();
     ctx.strokeStyle = "rgba(255,0,0,0.5)";
     ctx.moveTo(300,300);
     ctx.lineTo(x1,y1);
     // ctx.lineTo(x2,y2);
     ctx.lineTo(x,y);
     ctx.moveTo(300,300);
     ctx.lineTo(x,y);
     /*ctx.moveTo(x2,y2);
     ctx.lineTo(x,y);*/
     ctx.stroke(); 
     if(x1 > 600) {
      fan = -1;
     } else if (x1 < 200) {
      fan = 1;
     }
     if(y1 > 700) {
      fan1 = -1;
     } else if (y1 < 200) {
      fan1 = 1;
     } 
     x1 += fan;
     y1 += fan1;
     setTimeout(draw,22);
    }
    draw();
    // ctx.strokeRect(100,100,50,50);
    </script>
    </html>
    提示:您可以先修改部分代碼再運行