HTML5 canvas組件

canvas簡介

canvas標籤是用來繪製圖像的
canvas本身沒有繪畫的能力，僅僅是圖形的容器，相當於一塊畫板
必須要使用腳本完成繪製：JS

canvas繪畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <!-- 1、定義畫板 -->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        // 2、獲取畫板
        var canvas = document.getElementById("canvas");

        ///3、鋪上畫紙或畫布，獲取繪畫環境
        var cv = canvas.getContext("2d");

        // 4、開啓一條路徑或重置當前路徑，相當於擡筆，表示準備開始畫
        cv.beginPath();

        // 5、指定路徑(畫筆)起點: 畫布.moveTo(X座標，Y座標);
        cv.moveTo(50, 50);

        // 6、指定路徑(畫筆)到達位置: 畫布.lineTo(X座標，Y座標);
        cv.lineTo(350, 50);

        // 7、繪製當前路徑(畫筆)，默認爲黑色
        cv.stroke();
    </script>
</body>
</html>

畫筆寬度和顏色

canvas.lineWidth = 數值;：定義畫筆寬度(粗細)，值爲數值類型，單位爲像素
canvas.strokeStyle = “顏色值”：定義畫筆(路徑)顏色

多個到達點及開啓多條路徑

canvas.lineTo(X座標， Y座標);：定義一個新到達點，然後從上一個點到該點畫一條線條
canvas.beginPath();：開啓一條路徑，或重置當前路徑；相當於擡筆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <!-- 1、定義畫板 -->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d");
        cv.beginPath();
        cv.lineWidth = 10;
        cv.strokeStyle = "red";
        cv.moveTo(20, 20);
        cv.lineTo(200, 100);
        cv.lineTo(380, 20);
        cv.stroke();
        // ------------------------------------------
        // 開始新的路徑
        cv.beginPath();
        cv.lineWidth = 20;
        cv.strokeStyle = "green";
        cv.moveTo(20, 170);
        cv.lineTo(200, 250);
        cv.lineTo(380, 170);
        cv.stroke();
    </script>
</body>
</html>

閉合路徑和填充路徑

canvas.closePath();：閉合路徑，從當前點到開始點的路徑
canvas.fillStyle = “顏色值”;：定義填充顏色
canvas.fill();：填充當前路徑，默認爲黑色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <!-- 1、定義畫板 -->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d");
        cv.beginPath();
        cv.lineWidth = 10;
        cv.strokeStyle = "red";
        cv.moveTo(20, 20);
        cv.lineTo(200, 100);
        cv.lineTo(380, 20);

        // 不能指定路徑到達起點來關閉路徑，不是正常的關閉路徑
        // cv.lineTo(20, 20);

        // 創建閉合路徑：從當前點到開始點的路徑
        cv.closePath();
        
        // 繪製當前路徑
        cv.stroke();

        // 定義填充顏色
        cv.fillStyle = "orange";

        // 填充當前路徑，默認爲黑色
        cv.fill();
    </script>
</body>
</html>

繪製貝塞爾曲線

canvas.quadraticCurveto(cpx, cpy, x, y);：二次貝塞爾曲線，只有一個控制點
canvas.bezierCurveto(cpx1, cpy1, cpx2, cpy2, x, y);：三次貝塞爾曲線，有兩個控制點
cpx，cpy：控制點
x，y：到達點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <!-- 1、定義畫板 -->
    <canvas id="canvas" width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d");       
        cv.beginPath();
        cv.moveTo(10, 100); //貝塞爾曲線的起始點
        // 二次貝塞爾曲線：畫布.quadraticCurveTo(cpx, cpy, x, y);
        // cpx,cpy:控制點
        // x,y:到達點
        // 只有一個控制點
        // cv.quadraticCurveTo(200, 300, 300, 100);

        // 三次貝塞爾曲線：畫布.bezierCurveTo(cpx1, cpy2, cpx2, cpy2, x, y);
        // cpx,cpy:控制點
        // x,y:到達點
        // 有兩個控制點
        cv.bezierCurveTo(150, 200, 280, 50, 390, 100);

        cv.stroke();
    </script>
</body>
</html>

畫布寬高設置及生產圖片

canvas：寬高應直接在頭標籤中設置，單位爲像素，默認爲寬300px，高爲150px；在css中設置寬高，會把寬爲300px，高爲150px的畫布進行拉伸，所以會變形
canvas：最終會生成一張圖片，可以通過右鍵另存爲圖片；可以通過css來定義樣式，但不會生成到圖片中

繪製空心矩形

canvas.rect(左上角x座標，左上角y座標，矩形寬度，矩形高度)：創建矩形路徑，需使用stroke()繪製當前路徑
canvas.strokeRect(左上角x座標，左上角y座標，矩形寬度，矩形高度)：創建並繪製矩形路徑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d");       
        
        // 方法1；創建矩形路徑，再繪製當前路徑
        // 創建矩形路徑：畫布.rect(左上角x座標，左上角y座標，矩形寬度，矩形高度)
        // cv.rect(50, 50, 150, 100);
 
        // 繪製當前路徑
        // cv.stroke();

        // 方法2：創建並繪製矩形路徑
        // 創建矩形路徑：畫布.strokeRect(左上角x座標，左上角y座標，矩形寬度，矩形高度)
        cv.strokeRect(50, 50, 250, 100);
    </script>
</body>
</html>

繪製填充矩形及清空矩形像素

canvas.rect(左上角x座標，左上角y座標，矩形寬度，矩形高度)：創建矩形路徑，需使用fill()填充當前路徑
canvas.fillRect(左上角x座標，左上角y座標，矩形寬度，矩形高度);：創建並填充矩形路徑
canvas.clearRect(左上角x座標，左上角y座標，矩形寬度，矩形高度);：清空給定矩形內的指定像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d"); 

        // 指定填充顏色
        cv.fillStyle = "red";
        
        // 方法1；創建矩形路徑，再填充當前路徑
        // 創建矩形路徑：畫布.rect(左上角x座標，左上角y座標，矩形寬度，矩形高度)
        // cv.rect(50, 50, 150, 100);
 
        // 填充當前路徑，默認爲黑色
        // cv.fill();

        // 方法2：創建並填充矩形路徑
        // 創建矩形路徑：畫布.fillRect(左上角x座標，左上角y座標，矩形寬度，矩形高度)
        cv.fillRect(50, 50, 250, 100);

        // 清空給定矩形內的指定像素
        // 畫布.clearRect(左上角x座標，左上角y座標，矩形寬度，矩形高度)
        cv.clearRect(100, 100, 50, 45);
    </script>
</body>
</html>

繪製圓形

canvas.arc(圓心x座標，圓心y座標，半徑，起始弧度，結束弧度，繪製方向(可選));：創建圓形、圓弧路徑，再使用stroke()繪製或使用fill()填充當前路徑
起始弧度：3點鐘方向爲0度
繪製方向：可選，默認爲false；false=順時針，true=逆時針

角度和弧度換算

圓周弧度 = 2π, 360度 = 2π弧度, 1度 = 2π/360 = π/180弧度
π在js中用Math.PI表示
1角度 = Math.PI/180弧度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d"); 

        // 指定填充顏色
        cv.fillStyle = "#00ff00";
        cv.lineWidth = 5;
        
        // 創建圓形路徑，再繪製或填充當前路徑
        // 創建矩形路徑：畫布.arc(圓心x座標，圓心y座標，半徑， 起始弧度，結束弧度， 繪製方向(可選));
        // 角度和弧度換算
        // 圓周弧度 = 2π, 360度 = 2π弧度, 1度 = 2π/360 = π/180弧度
        // π在js中用Math.PI表示
        // 1角度 = Math.PI/180弧度

        cv.arc(200, 150, 100, 0, 2*Math.PI);
        cv.stroke();
        cv.fill();
    </script>
</body>
</html>

繪製圓弧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d"); 
        cv.beginPath(); //x軸
        cv.moveTo(0, 150);
        cv.lineTo(400, 150);
        cv.stroke();

        cv.beginPath(); //y軸
        cv.moveTo(200, 0);
        cv.lineTo(200, 300);
        cv.stroke();

        // 繪製圓弧
        cv.beginPath();
        cv.arc(200, 150, 100, 0, 90*Math.PI/180, true);
        // cv.arc(200, 150, 100,-90*Math.PI/180, 0);
        cv.stroke();
    </script>
</body>
</html>

繪製扇形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d"); 
        cv.fillStyle = "#00ff00";
        cv.strokeStyle = "#ff0000";
        cv.beginPath(); //x軸
        cv.moveTo(0, 150);
        cv.lineTo(400, 150);
        cv.stroke();

        cv.beginPath(); //y軸
        cv.moveTo(200, 0);
        cv.lineTo(200, 300);
        cv.stroke();

        // 繪製閉合弧形
        // cv.beginPath();
        // cv.arc(200, 150, 100, 0, 90*Math.PI/180);
        // cv.closePath();
        // cv.stroke();
        // cv.fill();

        // 繪製扇形
        cv.beginPath();
        cv.moveTo(200, 150);
        cv.arc(200, 150, 100, 0, 90*Math.PI/180);
        cv.closePath();
        cv.stroke();
        cv.fill();
    </script>
</body>
</html>

寫入文字

convas.font = “字體樣式字體粗細字號/行高字體系列”;：設置文本屬性
畫布.fillText(“要寫入的文字”, X座標, Y座標, 最大文本寬度(可選));：實心文字
convas.strokeText(“要寫入的文字”, X座標, Y座標, 最大文本寬度(可選));：空心文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d"); 
        cv.fillStyle = "#00ff00";
        cv.strokeStyle = "#ff0000";

        // 1、設置文本屬性
        // 畫布.font = "字體樣式 字體粗細 字號/行高 字體系列";
        cv.font = "italic 700 50px/100px 宋體";

        // 2、寫入文字
        // a、實心文字：畫布.fillText("要寫入的文字", X座標, Y座標, 最大文本寬度(可選));
        cv.fillText("苦澀2020", 50, 100);

        // b、空心文字：畫布.strokeText("要寫入的文字", X座標, Y座標, 最大文本寬度(可選));
        cv.strokeText("苦澀2020", 50, 200);
    </script>
</body>
</html>

繪製和定位圖像

canvas.drawImage(圖像對象，X座標，Y座標);：在畫布上繪製和定位圖像；爲了保險，通常應讓圖像加載完成後，再執行寫入畫布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d"); 
        cv.fillStyle = "#00ff00";
        cv.strokeStyle = "#ff0000";

        // 1、創建圖像資源
        var pt = new Image();
        pt.src = "./img/1.jpg";

        // 2、在畫布上繪製和定位圖像 畫布.drawImage(圖像對象，X座標，Y座標);
        //    爲了保險，通常應讓圖像加載完成後，再執行寫入畫布
        pt.onload = function(){
            cv.drawImage(pt, 50, 50);
        };
    </script>
</body>
</html>

設置和剪切圖像

convas.drawImage(圖像對象，X座標，Y座標，圖像寬度，圖像高度);：在畫布上繪製和定位圖像，並設置圖像尺寸
canvas.drawImage(圖像對象，剪切圖像X座標，剪切圖像Y座標，剪切圖像寬度，剪切圖像高度，X座標，Y座標，圖像寬度，圖像高度);：在畫布上繪製和定位剪切的部分圖像，並設置圖像尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d"); 
        cv.fillStyle = "#00ff00";
        cv.strokeStyle = "#ff0000";

        // 1、創建圖像資源
        var pt = new Image();
        pt.src = "./img/1.jpg";

        // 2、在畫布上繪製和定位圖像，並設置圖像尺寸 
        //    畫布.drawImage(圖像對象，X座標，Y座標，圖像寬度，圖像高度);
        //    爲了保險，通常應讓圖像加載完成後，再執行寫入畫布
        // pt.onload = function(){
        //     cv.drawImage(pt, 50, 50, 150, 200);
        // };

        // 3、在畫布上繪製和定位剪切的部分圖像，並設置圖像尺寸 
        //    畫布.drawImage(圖像對象，剪切圖像X座標，剪切圖像Y座標，剪切圖像寬度，剪切圖像高度，X座標，Y座標，圖像寬度，圖像高度);
        //    爲了保險，通常應讓圖像加載完成後，再執行寫入畫布
        pt.onload = function(){
            cv.drawImage(pt, 0, 200, 200, 100, 50, 50, 300, 150);
        };
    </script>
</body>
</html>

填充操作

canvas.createPattern(image, “repeat | repeat-x | repeat-y | no-repeat”);：在指定的方向上重複指定的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #canvas{border: 1px solid black;}
    </style>
</head>
<body>
    <canvas id="canvas"  width="400" height="300"></canvas>

    <script>
        var canvas = document.getElementById("canvas");

        var cv = canvas.getContext("2d"); 

        // 創建圖像資源
        var Iamp = new Image();
        Iamp.src = "./img/1.jpg";

        // createPattern(): 在指定的方向內重複指定的元素
        // 語法：畫布.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");

        Iamp.onload = function(){
            // 創建矩形路徑
            cv.rect(0, 0, 200, 150);
            cv.fillStyle = cv.createPattern(Iamp, "repeat");
            cv.fill();
        }
        
    </script>
</body>
</html>

實戰畫板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- <link rel="stylesheet" href="./reset.css"> -->
    <style type="text/css">
        *{margin: 0; padding: 0;}
        #box{width: 800px; height: 440px; margin: 50px auto; position: relative;}
        #zz{
            width: 800px; height: 400px; 
            position: absolute; top: 0; left: 0;
            background-color: rgba(0, 0, 0, 0);
            display: none;
        }
        .huabi{height: 40px; vertical-align: middle;}
        .huabi li{
            height: 40px; float: left; 
            margin-right: 20px;
            list-style-type:none;
        }
        .huabi li span{
            line-height: 40px; float: left; 
            display: block; margin-right: 10px;
        }
        .huabi li input{
            width: 80px; height: 30px; 
            float: left; display: block; 
        }
        .huabi li p{
            width:80px; height:1px; float:left;
            background:#000000; 
            margin: 10px 0 auto 10px;
        }
        .huabi li button{
            width: 70px; height: 33px; 
            float: left; margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 定義畫板 -->
        <canvas id="canvas"  width="800" height="400" style="background-color:#999999"></canvas>
        <div id="zz"></div>
        <ul class="huabi">
            <li>
                <span>畫筆顏色</span>
                <input type="color" id="cvColor" value="#000000">
            </li>
            <li>
                <span>畫筆粗細</span>
                <input type="range" id="cvRange" value="1" min="1" max="30">
                <p id="bi"></p>
            </li>
            <li>
                <span>畫布顏色</span>
                <input type="color" id="bgColor" value="#999999">
            </li>
            <li>
                <button id="clear">清空畫布</button>
                <button id="eraser">橡皮擦</button>
            </li>
        </ul>
    </div>

    <script>
        // 獲取畫板，獲取畫布環境
        var canvas = document.getElementById("canvas");
        var cv = canvas.getContext("2d"); 

        // 畫板添加鼠標點擊事件
        canvas.onmousedown = function(e){
            // 獲取鼠標相對於畫板內的位置
            var s_left = e.offsetX;
            var s_top = e.offsetY;
            // document.title = s_left + " | " + s_top;

            // 開啓路徑
            cv.beginPath();

            // 定義畫筆開始位置;將鼠標點擊的位置作爲新畫筆開始的位置
            cv.moveTo(s_left, s_top);

            // 畫板內鼠標移動事件
            canvas.onmousemove = function(event){
                // 獲取鼠標在畫板內移動的位置
                var n_left = event.offsetX;
                var n_top = event.offsetY;
                document.title = n_left + " | " + n_top;

                // 把路徑畫到當前鼠標的位置
                cv.lineTo(n_left, n_top);

                // 開始繪畫
                cv.stroke();
            };
        };

        // 鼠標鬆開事件，取消canvas上的鼠標移動事件
        canvas.onmouseup = function(){
            canvas.onmousemove = null;
        };

        // 改變畫筆顏色
        document.getElementById("cvColor").onchange = function(){
            cv.strokeStyle = this.value;
            document.getElementById("bi").style.background = cv.strokeStyle;
        }

        // 改變畫筆粗細
        document.getElementById("cvRange").onchange = function(){
            cv.lineWidth = this.value;
            document.getElementById("bi").style.height = this.value+"px";
            document.getElementById("bi").style.background = cv.strokeStyle;
        }

        // 改變畫布顏色
        document.getElementById("bgColor").onchange = function(){
            canvas.style.backgroundColor = this.value;
        }

        // 清空繪畫
        document.getElementById("clear").onclick = function(){
            cv.clearRect(0, 0, canvas.width, canvas.height);
        }


        // 橡皮擦功能
        var abc = 1;
        document.getElementById("eraser").onclick = function(){
            // 獲取遮罩層
            var zz = document.getElementById("zz");
            // 1:橡皮擦功能
            if(abc == 1){
                // 把遮罩層顯示出來
                zz.style.display = "block";
                // 文字修改成繪製
                this.innerText = "繪製";
                abc = 0;

                // 遮罩層添加鼠標點擊事件
                zz.onmousedown = function(){
                    // 畫板內鼠標移動事件
                    zz.onmousemove = function(event){
                        // 獲取鼠標在畫板內移動的位置
                        var m_left = event.offsetX;
                        var m_top = event.offsetY;
                        // document.title = m_left + " | " + m_top;
                        // 清空畫布上對應位置的像素
                        var bi = document.getElementById("cvRange").value;
                        console.log(bi);
                        cv.clearRect(m_left, m_top, bi, bi);
                    };
                };

                // 鼠標鬆開事件，取消遮罩層上的鼠標移動事件
                zz.onmouseup = function(){
                    zz.onmousemove = null;
                };

            }else{
                // 隱藏遮罩層
                zz.style.display = "none";
                // 文字修改成繪製
                this.innerText = "橡皮擦";
                abc = 1;
            }; 
        };
    </script>
</body>
</html>

HTML5 canvas組件

canvas簡介

畫筆寬度和顏色

多個到達點及開啓多條路徑

閉合路徑和填充路徑

繪製貝塞爾曲線

畫布寬高設置及生產圖片

繪製空心矩形

繪製填充矩形及清空矩形像素

繪製圓形

繪製圓弧

繪製扇形

寫入文字

繪製和定位圖像

設置和剪切圖像

填充操作

DAPPER 事務 TRANSACTION

JavaScript 本地存儲

基於jQuery實現幻燈片切換效果

HTML5 canvas組件

JavaScript 音頻插件和圖表插件

基於jQuery實現垂直輪播效果

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結