HTML5的學習之canvas畫布(三)

HTML5的學習之canvas畫布

上篇博客主要講解了canvas線條有關的一些屬性和方法。這篇文章我們繼續學習canvas有關圖形繪製的方法。

1.矩形

方法	描述
rect()	創建矩形。
fillRect()	繪製"被填充"的矩形。
strokeRect()	繪製矩形（無填充）。
clearRect()	在給定的矩形內清除指定的像素。

2.圓形

方法	描述
arc()	創建弧/曲線（用於創建圓形或部分圓）。
arcTo()	創建兩切線之間的弧/曲線。
ellipse()	創建橢圓。

3.路徑

方法	描述
fill()	填充當前繪圖（路徑）。
stroke()	繪製已定義的路徑。
beginPath()	起始一條路徑，或重置當前路徑。
moveTo()	把路徑移動到畫布中的指定點，不創建線條。
closePath()	創建從當前點回到起始點的路徑。
lineTo()	添加一個新點，然後在畫布中創建從該點到最後指定點的線條。
clip()	從原始畫布剪切任意形狀和尺寸的區域。
isPointInPath()	如果指定的點位於當前路徑中，則返回 true，否則返回 false。
quadraticCurveTo()	創建二次貝塞爾曲線。
bezierCurveTo()	創建三次貝塞爾曲線。

路徑HTML代碼：

    <canvas id="my_canvas"></canvas>

路徑JavaScript代碼：

    // 03canvas畫布的路徑
    // 1.獲取元素
    var oCanvas = document.getElementById("my_canvas");
    // 2.設置畫布大小
    oCanvas.width = "1000";
    oCanvas.height = "1000";
    // 3.獲取 畫布環境
    var myCanvas = oCanvas.getContext("2d");
    // 4.繪圖

    
    // fill()	填充當前繪圖（路徑）。
    // myCanvas.fillStyle="skyblue";
    // myCanvas.rect(0, 0, 200, 200);
    // myCanvas.fill();
    // stroke()	繪製已定義的路徑。
    // myCanvas.strokeStyle="yellow";
    // myCanvas.rect(0, 0, 200, 200);
    // myCanvas.stroke();

    // beginPath()	起始一條路徑，或重置當前路徑。
    myCanvas.beginPath();//開始   路徑
    myCanvas.lineWidth="10";
    myCanvas.strokeStyle="yellow";

    // moveTo()	把路徑移動到畫布中的指定點，不創建線條。
    myCanvas.moveTo(0,50);
    // lineTo()	添加一個新點，然後在畫布中創建從該點到最後指定點的線條。
    myCanvas.lineTo(200,200);
    myCanvas.lineJoin="miter";//尖角
    myCanvas.lineJoin="round";//圓角
    myCanvas.lineJoin="bevel";;//斜角
    myCanvas.lineTo(300,100);

    myCanvas.lineTo(400,500);
    myCanvas.lineTo(100,400);
    myCanvas.closePath();
    myCanvas.stroke();
    // closePath()	創建從當前點回到起始點的路徑。  

圓形HTML代碼：

    <canvas id="my_canvas"></canvas>

圓形JavaScript代碼：

    // 1.獲取元素
    var oCanvas = document.getElementById("my_canvas");
    // 2.設置畫布大小
    oCanvas.width = "1000";
    oCanvas.height = "1000";
    // 3.獲取 畫布環境
    var myCanvas = oCanvas.getContext("2d");
    // 4.繪圖
    // beginPath()	起始一條路徑，或重置當前路徑
    // myCanvas.beginPath();//路徑開始
    // // arc(x,y,r,起始角,結束角,false順/true逆)	創建弧/曲線（用於創建圓形或部分圓）。
    // myCanvas.lineWidth="10";    
    // // myCanvas.strokeStyle="yellow";
    // myCanvas.fillStyle="yellow";
    // myCanvas.arc(500,500,200,0,Math.PI/2,true);
    // myCanvas.closePath();
    // // myCanvas.stroke();
    // myCanvas.fill();


    // arcTo(x1,y1,x2,y2,r)	創建兩切線之間的弧/曲線。
    myCanvas.beginPath();
    myCanvas.moveTo(50,50);
    myCanvas.lineTo(200,50);
    myCanvas.arcTo(300,50,300,150,100);
    myCanvas.lineTo(300,300);
    myCanvas.stroke();

視頻講解鏈接：
https://www.bilibili.com/video/BV1Fv41167hL/