注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。

參加1_bit博主前端學習計劃發文時在頭部記得加上本專欄鏈接，示例如下：

我已加入 1_bit 博主的免費前端站起來學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html

一、canvas

🐶1_bit：其實現在我們已經學完大部分的基礎內容了，馬上學到 CSS 就可以開始實戰了。

👸小媛：那么快嗎？

🐶1_bit：對呀，咱們這一節是第一個階段的最后的一篇文章，之后的話是以 CSS 為主了，然后剩下的 HTML 內容需要結合 CSS 進行講解；后面還會有專門的 JavaScript 課程將會更為詳細的講解 JavaScript。

👸小媛：喔，明白了。

🐶1_bit：那這一節課咱們就簡單的使用 js 來畫畫吧？

👸小媛：哈？可以畫畫嗎？

🐶1_bit：對的，咱們使用 HTML5 的 canvas 來畫畫。

👸小媛：是使用 JavaScript 進行圖像繪制？

🐶1_bit：對的。

👸小媛：那什么是 canvas 呢？

🐶1_bit：顧名思義 canvas 就是一塊畫布，咱們在上面可以繪制圖像。

👸小媛：還真是字面意思。

🐶1_bit：那咱們現在就開始吧。

二、canvas 基礎繪制線段

🐶1_bit：在 html 中，用 canvas 標簽表示畫布，如下代碼所示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程11 javascript</title><style>canvas{background-color:bisque;}</style>
</head>
<body><canvas id="tCanvas" width="500" height="500"></canvas>
</body>
</html>

🐶1_bit：像以上代碼中，咱們可以發現我在 head 部分添加了一個 style，在 style 中添加了一個 canvas 的背景色樣式，是為了給予這個canvas背景色方便查看。

👸小媛：不然就是跟界面一樣的顏色然后就不好觀察了嗎？

🐶1_bit：對的，是這個意思，你還可以看到這個canvas 我還給予了寬高和ID，這些是要給予到的一些基本屬性。

👸小媛：明白了。

🐶1_bit：接下來咱們看看這個 canvas 如何進行使用，如以下代碼示例。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程11 javascript</title><style>canvas{background-color:bisque;}</style>
</head>
<body><canvas id="tCanvas" width="500" height="500"></canvas><script>var canvas=document.getElementById('tCanvas');//通過 getElementById 取得對應的 canvas 對象var context=canvas.getContext('2d');//表示需要繪制圖像的類型為2dcontext.beginPath();//充值畫布路徑，你畫的線段、線條都是路徑context.moveTo(100,100);//下筆點移動到某一個位置context.lineTo(200,200);//從下筆點繪制一條線段到 xy 為 200 處context.stroke();//開始繪制</script>
</body>
</html>

👸小媛：一下子好多東西，感覺都看不懂了。

🐶1_bit：沒關系，咱們慢慢來，首先查看第一條代碼：

var canvas=document.getElementById('tCanvas');

🐶1_bit：以上代碼中，document.getElementById('tCanvas');你應該明白，表示得到 id 為 tCanvas 的這個 dom 節點，這個節點為一個 canvas 標簽，那么此時變量 canvas 就表示了這個 canvas 標簽，這點明白吧？

👸小媛：明白，意思就是這是個 canvas 對象了，可以使用這個對象所對應的一些功能。

🐶1_bit：你亂猜的吧？不過，猜對了。我們接著查看下一句代碼：

var context=canvas.getContext('2d');

🐶1_bit：這一句代碼中的 canvas 對象就是指對應的畫布對象，因為剛剛使用了 getbyID 函數獲取到了對應的節點，此時這個 canvas 就表示這個節點通過 getContext 指定當前所需要繪制的圖片類型，在此傳入了參數 2d，表示接下來以 2d 繪制為主。

👸小媛：明白了。

🐶1_bit：再接著代碼是：

context.beginPath();

🐶1_bit：這段代碼表示“清空畫布”，或者說是重置畫布的內容，讓畫布干凈些。

👸小媛：這個明白，檫黑板一樣的道理。

🐶1_bit：接著到代碼：

context.moveTo(100,100);

🐶1_bit：這段代碼表示將下筆的點移動到 xy 值為（100，100）處。

👸小媛：這個意思？

🐶1_bit：對呀，move to 意思不是說移動到哪里嗎？

👸小媛：原來如此。

🐶1_bit：接下來代碼：

context.lineTo(200,200);

🐶1_bit：的意思也很簡單，就是你之前使用 moveTo 找到了一個洛必點，那么現在 lineTo 就是畫一條直線，你要把這一條直線畫到哪，那 200，200 就是 xy 的坐標。

👸小媛：那么簡單。

🐶1_bit：那你認為現在的線段已經開始“繪制”了嗎？

👸小媛：繪制了呀，剛剛不是都代碼寫了嗎？

🐶1_bit：還差一步，最后一個代碼：

context.stroke();

🐶1_bit：才是表示開始繪制，你可以理解成之前所寫的代碼只是你在描述你要繪制的步驟，最后一步代碼則是表示將那些你要繪制的路徑進行繪制。

👸小媛：明白了，所以最后一句代碼不能少。

🐶1_bit：是的。

三、矩形繪制

🐶1_bit：接下來咱們來看看怎么繪制一個矩形吧？

👸小媛：一條一條線段的畫？

🐶1_bit：哪有那么麻煩，很簡單的，直接使用一個方法 fillRect，下面是一個完整的示例。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程11-1 javascript</title><style>canvas{background-color:bisque;}</style>
</head>
<body><canvas id="tCanvasa" width="500" height="500"></canvas><script>var canvas=document.getElementById('tCanvasa');var context=canvas.getContext('2d');context.beginPath();context.fillRect(10,10,300,400);</script>
</body>
</html>

👸小媛：不用 stroke 方法了嗎？

🐶1_bit：對的，在這里直接使用 fillRect 方法繪制一個矩形，其中 10，10 是你的落筆點，或者你理解為起始繪制坐標，隨后的 300 和 400 分別是對應的寬和高，這樣的話就可以繪制出如下的矩形了。

在這里插入圖片描述
👸小媛：不過黑色好丑，怎么改顏色？

🐶1_bit：那你只需要添加 fillStyle 屬性即可，例如 context.fillStyle = "#FF0000"; 　。
在這里插入圖片描述
🐶1_bit：那么繪制出來的圖像將會按照你給予的顏色進行填充。

👸小媛：那我不想填充顏色呢？

🐶1_bit：那你只需要將 fillRect 方法替換成 strokeRect 方法即可，fillRect 是填充繪制矩形 strokeRect 則是不填充：
在這里插入圖片描述
🐶1_bit：繪制的結果如下：

👸小媛：那怎么樣指定一個顏色是線條顏色呢？

🐶1_bit：只需要給予 strokeStyle 屬性設置一個顏色即可，例如 context.strokeStyle = "#FF0000";。
在這里插入圖片描述
🐶1_bit：這樣的話就可以繪制出指定顏色的矩形了。

三、三角形繪制

👸小媛：那三角形怎么繪制？

🐶1_bit：要繪制三角形我們需要搞懂線段的繪制的概念，咱們看以下代碼。

<body><canvas id="tCanvasa" width="300" height="300"></canvas><script>var canvas=document.getElementById('tCanvasa');//通過 getElementById 取得對應的 canvas 對象var context=canvas.getContext('2d');//指定了您想要在畫布上繪制的類型context.lineTo(20, 20);context.lineTo(20, 170);context.lineTo(170, 170);context.lineTo(20, 20);context.stroke();</script>
</body>

🐶1_bit：以上代碼中，首先把落筆點放在了xy均為20處，接下來繪制一條線段到 20,170 處，那么此時肯定是一條垂直的直線，接著再從20,170 處繪制一條直線到 170,170 處，那么此時就有了三角形的兩條邊，接著再從 170，170 處返回最先落筆點，那么此時三角形繪制完畢。
在這里插入圖片描述
👸小媛：原來落筆點就是你繪制的的線段的最后坐標處呀。

🐶1_bit：對的，不過你注意，一定要在路徑編寫完代碼后添加 stroke 方法。

👸小媛：明白了，那怎么填充顏色呢？

🐶1_bit：填充顏色很簡單，你只需要添加 fill 方法即可：context.fill();。
在這里插入圖片描述

👸小媛：接下來我該問如何改變填充色了。

🐶1_bit：填充色使用 fillStyle ，例如 context.fillStyle = "#FF0000";，要注意線段需要閉合才可以填充顏色喲。
在這里插入圖片描述
👸小媛：明白了。

【前端就業課第一階段】HTML5 零基礎到實戰（十一）canvas 基礎
【前端就業課第一階段】HTML5 零基礎到實戰（十）JavaScript基礎一篇入門
【前端就業課第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解