HTML5權威指南筆記：35-使用canvas元素（1）

1 開始使用canvas 元素

canvas元素
元素類型	短語／流
允許具有的父元素	任何能包含短語或流元素的元素
局部屬性	height 、width
內容	短語或流內容
標籤用法	開始和結束標籤
是否爲HTML5新增	是
在HTML5中的變化	此處不適用
習慣樣式	無

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: medium double black; margin: 4px}
        </style>
    </head>
    <body>
        <!--canvas元素裏的內容會在瀏覽器不支持此元素時作爲備用內容顯示-->
        <canvas width="500" height="200">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
    </body>
</html>

2 獲取畫布的上下文

爲了在canvas元素上繪圖，我們需要獲得一個上下文對象。

HTMLCanvasElement對象：

成員	說明	返回
height	對應於height屬性	數值
width	對應於width屬性	數值
getContext(<context>)	爲畫布返回繪圖上下文	對象

例子：爲畫布獲取二維上下文對象

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: medium double black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="100">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            //傳遞2d表示獲取二維上下文對象
            var ctx = document.getElementById("canvas").getContext("2d");
            //獲取後就可以進行繪圖
            ctx.fillRect(10, 10, 50, 50);
        </script>
    </body>
</html>

3 繪製矩形

簡單的圖形方法：

成員	說明	返回
clearRect(x, y, w, h)	清除指定的矩形	void
fillRect(x, y, w, h)	繪製一個實心矩形	void
strokeRect(x, y, w, h)	繪製一個空心矩形	void

x,y表示從canvas元素左上角算起的偏移量，w和h參數指定了待繪製矩形的寬度和高度。

例子：使用fillRect和strokeRect方法

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            獲取2d上下文對象
            var ctx = document.getElementById("canvas").getContext("2d");

            var offset = 10;
            var size = 50;
            var count = 5;

            for (var i = 0; i < count; i++) {
                //繪製實心矩形
                ctx.fillRect(i * (offset + size) + offset, offset, size, size);
                //繪製空心矩形
                ctx.strokeRect(i * (offset + size) + offset, (2 * offset) + size, 
                    size, size);
                //清空一部分矩形
                ctx.clearRect(i * (offset + size) + offset, offset + 5, size, size - 10);
            }
        </script>
    </body>
</html>

4 設置畫布繪製狀態

基本的繪製狀態屬性：

成員	說明	默認值
fillStyle	獲取或設置用於實心圖形的樣式	black
lineJoin	獲取或設置線條與圖形連接時的樣式	miter
lineWidth	獲取或設置線條的寬度	1.0
strokeStyle	獲取或設置用於線條的樣式	black

4.1 設置線條連接樣式

三個值：round 、bevel和miter , 默認值是miter 。
例子：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            ctx.lineWidth = 20;

            ctx.lineJoin = "round";
            ctx.strokeRect(20, 20, 100, 100);

            ctx.lineJoin = "bevel";
            ctx.strokeRect(160, 20, 100, 100);

            ctx.lineJoin = "miter";
            ctx.strokeRect(300, 20, 100, 100);
        </script>
    </body>
</html>

4.2 設置填充和筆觸樣式

<canvas id="canvas" width="500" height="140">
    Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
    var ctx = document.getElementById("canvas").getContext("2d");
    //可以使用css顏色值來指定一種顏色，名稱或顏色模型都可以。
    ctx.fillStyle = "black";
    ctx.strokeStyle = "rgb(0,0,0)";
</script>

4.3 使用漸變

漸變方法：

名稱	說明	返回
createlinearGradient(xo, yo, x1, y1)	創建線性漸變	CanvasGradient
createRadialGradient(xo, yo, ro, x1, y1, rl)	創建徑向漸變	CanvasGradient

CanvasGradient 的方法：
addColorStop(<position>, <color>)：給漸變的梯度線添加一種純色，返回void。

4.3.1 使用線性漸變

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            //創建線性漸變，提供的四個值會作爲畫布上一條線段的開始和結束座標
            var grad = ctx.createLinearGradient(0, 0, 500, 140);
            //添加線性漸變屬性，0表示開始，1表示終點
            grad.addColorStop(0, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            //定義漸變並添加顏色點之後，就可以用CanvasGradient對象來設置fillStyle或strokeStyle屬性
            ctx.fillStyle = grad;
            //最後，就可以繪製一個圖形
            ctx.fillRect(0, 0, 500, 140);            
        </script>
    </body>
</html>

4.3.2 使用徑向漸變

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            //創建徑向漸變，漸變的起點由第一個圓定義，終點則是第二個圓，在兩者之間添加顏色點。
            //起點圓的圓心座標（第一個和第二個參數）
            //起點圓的半徑（第三個參數）
            //終點圓的圓心座標（第四個和第五個參數）
            //終點圓的半徑（第六個參數）
            var grad = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
            //添加徑向漸變屬性，0表示開始，1表示終點
            grad.addColorStop(0, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");
            //定義漸變並添加顏色點之後，就可以用CanvasGradient對象來設置fillStyle或strokeStyle屬性
            ctx.fillStyle = grad;
            //最後，就可以繪製一個圖形
            ctx.fillRect(0, 0, 500, 140);
        </script>
    </body>
</html>

4.5 使用圖案

2D繪圖上下文定義了對三種圖案類型的支持：圖像、視頻和畫布。但是隻有圖像得以實現。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <!--需要有一個img元素，它對用戶是不可見的-->
        <img id="banana" hidden src="banana-small.png"/>
        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            //獲取img元素
            var imageElem = document.getElementById("banana");
            //將獲取的img元素作爲創建圖像的第一個參數。
            //第二個參數必須是repeat，repeat-x，repeat-y，no-repeat中的一個
            var pattern = ctx.createPattern(imageElem, "repeat");

            //最後就可以進行繪製了
            ctx.fillStyle = pattern;
            ctx.fillRect(0, 0, 500, 140);
        </script>
    </body>
</html>

5 保存和恢復繪製狀態

使用下面的方法保存和恢復繪製狀態

save()：保存繪製狀態屈性的值，並把它們推入狀態棧
restore()：取出狀態棧的第一組值，用它們來設置繪製狀態

例子：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black; margin: 4px}
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500" height="140" preload="auto">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <div>
            <button>Save</button>
            <button>Restore</button>
        </div>
        <script>
            var ctx = document.getElementById("canvas").getContext("2d");

            var grad = ctx.createLinearGradient(500, 0, 500, 140);
            grad.addColorStop(0, "red");
            grad.addColorStop(0.5, "white");
            grad.addColorStop(1, "black");

            var colors = ["black", grad, "red", "green", "yellow", "black", "grey"];

            var cIndex = 0;

            ctx.fillStyle = colors[cIndex];
            draw();

            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }

            function handleButtonPress(e) {
                switch (e.target.innerHTML) {
                    //保存當前的繪製狀態
                    case 'Save':
                        ctx.save();
                        cIndex = (cIndex + 1) % colors.length;
                        ctx.fillStyle = colors[cIndex];
                        draw();
                        break;
                    //恢復之前的繪製狀態
                    case 'Restore':
                        cIndex = Math.max(0, cIndex -1);
                        ctx.restore();
                        draw();
                        break;
                }
            }
            function draw() {
                ctx.fillRect(0, 0, 500, 140);
            }
        </script>
    </body>
</html>

6 繪製圖像

可以用drawlmage方法在畫布上繪製圖像

這個方法需要三個、五個或九個參數。
第一個參數始終是圖像的來源，它可以是代表img 、video或其他canvas元素的DOM對象。
使用三個參數時，第二個和第三個參數給出了圖像應當在畫布上繪製的座標。
使用五個參數時，額外的參數指定了應當給圖像繪製的寬度和高度，以代替原始尺寸。
使用九個參數時：第二個和第三個參數是在源圖像內的偏移量；第四個和第五個參數是源圖像所需使用區域的寬度和高度；第六個和第七個參數指定了所選區域的左上角將要在畫布上繪製的座標；第八個和第九個參數指定了所選區域將要繪製的寬度和高度。

例子：對視頻進行截圖

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black}
            body > * {float:left;}
        </style>
    </head>
    <body>
        <video id="vid" src="timessquare.webm" controls preload="auto" 
            width="360" height="240">
            Video cannot be displayed
        </video>
        <div>
            <button id="pressme">Snapshot</button>
        </div>        
        <canvas id="canvas" width="360" height="240">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var imageElement = document.getElementById("vid");
            //獲取視頻video對象後，點擊按鈕會對當前偵進行截圖，並繪製在canvas中
            document.getElementById("pressme").onclick = function(e) {
                 ctx.drawImage(imageElement, 0, 0, 360, 240);
            }
        </script>
    </body>
</html>

例子：用canvas顯示視頻並在上面繪圖

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black}
            body > * {float:left;}
        </style>
    </head>
    <body>
        <!--隱藏視頻-->
        <video id="vid" hidden src="timessquare.webm" preload="auto" 
            width="360" height="240" autoplay></video>
        <canvas id="canvas" width="360" height="240">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var imageElement = document.getElementById("vid");

            var width = 100;
            var height = 10;
            ctx.lineWidth = 5;
            ctx.strokeStyle = "red";

            //添加計時器，對圖像進行截圖，並使用canvas進行繪製
            setInterval(function() {
                ctx.drawImage(imageElement, 0, 0, 360, 240);
                ctx.strokeRect(180 - (width/2),120 - (height/2), width, height);
            }, 25);
            //添加計時器，改變繪製圖像的屬性
            setInterval(function() {
                width = (width + 1) % 200;
                height = (height + 3) % 200;
            }, 100);

        </script>
    </body>
</html>

例子：將畫布作爲drawImage方法的來源

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style>
            canvas {border: thin solid black}
            body > * {float:left;}
        </style>
    </head>
    <body>
        <video id="vid" hidden src="timessquare.webm" preload="auto" 
            width="360" height="240" autoplay></video>
        <canvas id="canvas" width="360" height="240">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <div>
            <button id="pressme">Press Me</button>
        </div>
        <canvas id="canvas2" width="360" height="240">
            Your browser doesn't support the <code>canvas</code> element
        </canvas>
        <script>
            var srcCanvasElement = document.getElementById("canvas");
            var ctx = srcCanvasElement.getContext("2d");
            var ctx2= document.getElementById("canvas2").getContext("2d");
            var imageElement = document.getElementById("vid");

            document.getElementById("pressme").onclick = takeSnapshot;

            var width = 100;
            var height = 10;
            ctx.lineWidth = 5;
            ctx.strokeStyle = "red";
            ctx2.lineWidth = 30;
            ctx2.strokeStyle = "black;"

            setInterval(function() {
                ctx.drawImage(imageElement, 0, 0, 360, 240);
                ctx.strokeRect(180 - (width/2),120 - (height/2), width, height);
            }, 25);

            setInterval(function() {
                width = (width + 1) % 200;
                height = (height + 3) % 200;
            }, 100);

            //當按鈕被按下時，我把代表原canvas的HTMLCanvasElement對象作爲第一個參數，
            //用於調用第二個canvas上下文對象上的drawlmage方法
            function takeSnapshot() {
                ctx2.drawImage(srcCanvasElement, 0, 0, 360, 240);
                ctx2.strokeRect(0, 0, 360, 240);
            }
        </script>
    </body>
</html>

HTML5權威指南筆記：35-使用canvas元素（1）

1 開始使用canvas 元素

2 獲取畫布的上下文

3 繪製矩形

4 設置畫布繪製狀態

4.1 設置線條連接樣式

4.2 設置填充和筆觸樣式

4.3 使用漸變

4.3.1 使用線性漸變

4.3.2 使用徑向漸變

4.5 使用圖案

5 保存和恢復繪製狀態

6 繪製圖像

Android啓動過程-萬字長文(Android14)

【SQL進階】CASE語句的使用

這種嵌套字典類型的數據，我想把它讀取到df裏，如何操作？

微調真的能讓LLM學到新東西嗎:引入新知識可能讓模型產生更多的幻覺

iNeuOS工業互聯網操作系統，增加電力IEC104協議

微服務實踐k8s&dapr開發部署實驗（3）訂閱發佈

kbgressdb之數據結構V0.2

內聚性和耦合性的類型

SQL Server 2008編程入門經典筆記：表連接

SQL Server 2008編程入門經典筆記：視圖

HTML5權威指南筆記：7-創建HTML文檔

自頂向下語法分析方法：提取左公共因子

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

linux以太網驅動總結