HTML5的學習之canvas畫布(二)

HTML5的學習之canvas畫布

這篇文章我麼繼續學習canvas畫布。學習學習canvas畫布線條的顏色，漸變，陰影等屬性和方法。

屬性

1.顏色屬性

屬性	描述
fillStyle	設置或返回用於填充繪畫的顏色、漸變或模式。
strokeStyle	設置或返回用於筆觸的顏色、漸變或模式。

2.陰影屬性

屬性	描述
shadowColor	設置或返回用於陰影的顏色。
shadowBlur	設置或返回用於陰影的模糊級別。
shadowOffsetX	設置或返回陰影與形狀的水平距離。
shadowOffsetY	設置或返回陰影與形狀的垂直距離。

3.線條樣式屬性

屬性	描述
lineCap	設置或返回線條的結束端點樣式。
lineJoin	設置或返回兩條線相交時，所創建的拐角類型。
lineWidth	設置或返回當前的線條寬度。
miterLimit	設置或返回最大斜接長度。

方法

1.漸變方法

方法	描述
createLinearGradient()	創建線性漸變（用在畫布內容上）。
createPattern()	在指定的方向上重複指定的元素。
createRadialGradient()	創建放射狀/環形的漸變（用在畫布內容上）。
addColorStop()	規定漸變對象中的顏色和停止位置。

HTML代碼：

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

JavaScript代碼：

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


    // 方法  矩形
    // rect(x,y,width,height)	創建矩形。
    // myCanvas.rect(100, 100, 200, 200);
    // myCanvas.stroke(); //繪製已經定義的路徑
    // strokeRect(x,y,width,height)	繪製矩形（無填充）。
    // myCanvas.strokeRect(0, 320, 200, 200);

    // fillRect(x,y,width,height);	繪製"被填充"的矩形。
    // myCanvas.fillRect(600, 600, 400, 400);
    // clearRect(x,y,width,height)	在給定的矩形內清除指定的像素。
    // myCanvas.clearRect(700,700,100,100);


    // 顏色 陰影  屬性
    // fillStyle	設置或返回用於 填充 繪畫的顏色、 漸變 或模式。
    // myCanvas.shadowColor="yellow";
    // myCanvas.shadowBlur="20";
    // myCanvas.shadowOffsetX="20";
    // myCanvas.shadowOffsetY="20";
    // myCanvas.fillStyle="red";
    // myCanvas.fillRect(0,0,200,200);

    // strokeStyle	設置或返回用於 筆觸 的顏色、漸變或模式。   
    // myCanvas.strokeStyle="yellow";
    // myCanvas.strokeRect(0, 0, 200, 200);

    // shadowColor	設置或返回用於陰影的顏色。
    // shadowBlur	設置或返回用於陰影的模糊級別。
    // shadowOffsetX	設置或返回陰影與形狀的水平距離。
    // shadowOffsetY	設置或返回陰影與形狀的垂直距離。

    // 顏色 陰影 方法
    // createLinearGradient(x0,y0,x1,y1)	創建線性漸變（用在畫布內容上）。
    // createRadialGradient(x0,y0,r0,x1,y1,r1)	創建放射狀/環形的漸變（用在畫布內容上）。
    // addColorStop(stop,color)	規定漸變對象中的顏色和停止位置。 stop 0-1
    // 創建漸變色
    // var linearGra=myCanvas.createLinearGradient(0,0,450,450);

    var linearGra = myCanvas.createRadialGradient(250, 250, 10, 250, 250, 300);
    // 設置漸變色
    // linearGra.addColorStop(0,"red");
    // linearGra.addColorStop(0.2,"yellow");
    // linearGra.addColorStop(0.7,"blue");
    // 使用漸變色
    // myCanvas.fillStyle=linearGra;
    // myCanvas.fillRect(0,0,500,500);
    // myCanvas.strokeStyle=linearGra;
    // myCanvas.strokeRect(10,10,500,500);

    // createPattern(元素名,重複)	在指定的方向上重複指定的元素。
    var oImg = document.getElementById("my_img");
    // var oImg = new Image();
    // oImg.src = "../0603/img/1.jpg";
    oImg.onload = function () {
        var myImg = myCanvas.createPattern(oImg, "repeat");
        myCanvas.fillStyle = myImg;
        myCanvas.fillRect(0, 0, 500, 500);
    }

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