1.canvas

canvas:畫布，是H5提供2D繪圖技術
語法：
    <canvas width=" " height=" ">
        您的瀏覽器版本太低，請更新！
    </canvas>
canvas標籤在瀏覽器中預設300*150的inline-block,
畫布的寬度和高只能使用html/js屬性來賦值，不能用CSS樣式來賦值!
每個畫布上有且只有一個“畫筆”對角，該物件進行繪圖.
    var ctx = canvas.getContext("2d");

2.使用Canvas繪製矩形,矩形定位點在自己的左上角

ctx.strokeWidth = 1;       描邊寬度(空心)
ctx.fillStyle = "blue"     填充樣式/顏色(實心)
ctx.strokeStyle="red";    描邊樣式(空心);
ctx.fillRect(x,y,w,h);      填充一個矩形
ctx.strokeRect(x,y,w,h);   描邊一個矩形 
ctx.clearRect(x,y,w,h);    清除一個矩形範圍內所有繪圖

練習1：在畫布左上角右上角左下角右下角，居中位置畫5個100*80矩形

<canvas id="c2" width="500" height="400">您的瀏覽器版本太低，請更新</canvas>
    <script>
        let c2 = document.querySelector("#c2");
        let ctx = c2.getContext("2d");
        ctx.strokeStyle = "red";
        ctx.strokeRect(0,0,100,80);
        ctx.strokeRect(
 
0,320,100,80);
        ctx.strokeRect(400,0,100,80);
        ctx.strokeRect(400,320,100,80);
        ctx.strokeRect(200,160,100,80);
    </script>

練習2：在畫布上描邊一個可以(左右;上下;不同方向)移動矩形

<canvas id="c2" width="500" height="400">您的瀏覽器版本太低，請更新</canvas>
    <script>
        let c2 = document.querySelector("#c2");
        let ctx 
 
= c2.getContext("2d");
        ctx.strokeStyle = "red";
        let x = 0;
        let xDirection = 1;  //取為1時向右移動，-1時向左移動
        let timer = setInterval(function task(){
            ctx.clearRect(0,0,500,400);
            x += 1*xDirection;
            if(x>400){
                xDirection =-1;
            }else if(x<=0){
                xDirection = 1;
            }
            ctx.strokeRect(x,0,100,80); 
        },1);
    </script>

3.canvas繪圖文字

一段文字:
ctx.textBaseline = "top/bottom/alphabetic"   #文字垂直對齊方式
ctx.font = " "     字型大小和字型
ctx.fillText(str,x,y);         填充一段文字
ctx.strokeText(str,x,y)      描邊一段文字
ctx.measureText(str)      測量文字寬度,返回物件{width:x}

練習:在畫布左右移動文字

<canvas id="c2" width="500" height="400">您的瀏覽器版本太低，請更新</canvas>
    <script>
        let c2 = document.querySelector("#c2");
        let ctx = c2.getContext("2d");
        ctx.textBaseline="top";
        let str = "你好";
        ctx.fillStyle = "red";
        ctx.font = "29px sans-serif";
        let obj = ctx.measureText(str);
        let w = obj.width;
        let x = 0;
        let xDirection = 1;
        let timer = setInterval(function task(){
            ctx.clearRect(0,0,500,400);
            x += 1*xDirection;
            if(x>500-w){
                xDirection = -1;
            }else if(x<=0){
                xDirection = 1;
            }
            ctx.fillText(str,x,0);
        },10)
    </script>

4.canvas繪圖漸變物件

線性漸變:linearGradient
徑向漸變:radialGradient
步驟：
    1.建立漸變物件
        var g = ctx.createLinearGradient(x1,y1,x2,y2);
    2.設定顏色點
        g.addColorStop(0,"blue");
        g.addColorStop(0.5,"red");
        g.addColorStop(1,"green");
    3.將漸變物件應用填充或描邊樣式
        ctx.fillStyle = g;
    4.畫矩形畫文字
        ctx.fillRect(0,0,500,100);

練習：畫出一個由藍、紅、綠漸變的圖案

    <canvas id="c2" width="500" height="400"></canvas>
    <script>
        let c2 = document.querySelector("#c2");
        let ctx = c2.getContext("2d");
        let g = ctx.createLinearGradient(0,0,500,0);
        g.addColorStop(0,"blue");
        g.addColorStop(0.5,"red");
        g.addColorStop(1,"green");
        ctx.fillStyle = g;
        ctx.fillRect(0,0,500,100);
    </script>