🍅 作者：阿珊
🍅 作者簡介：95后前端小姐姐，藍橋簽約作者，歡迎點贊、收藏、評論
🍅 粉絲專屬福利：知識體系、面試題庫、技識訓助、簡歷模板，文末公眾號領取
🍅 包郵送書（每周1-2次）：點贊、收藏、評論本文章即可參與或關注公眾號「資訊技術智庫」回復「送書」
送書活動說明及每期開獎：https://blog.csdn.net/weixin_39032019/category_11380101.html
目錄
canvas簡介
canvas詳解
在網頁中創建canvas畫布
使用JavaScript獲取網頁中的canvas物件
canvas坐標系
繪制圖形：繪制直線
使用連續畫線的方法繪制一個三角形
繪制圖形：繪制矩形
繪制圖形：繪制圓弧
使用arc()方法繪制圓弧
使用arc()方法畫圓
指定如何繪制線段的末端
畫一個正六邊形
畫一個笑臉
送書活動
參與方式一：
參與方式二：
canvas簡介
canvas元素是HTML5中新增的一個用于繪圖的重要元素，
在頁面中增加一個canvas元素就相當于在網頁中添加一塊畫布，之后就可以利用一系列的繪圖指令，在“畫布”上繪制圖形，
在網頁上使用canvas元素時，它會創建一塊矩形區域，
用戶可以自定義具體的大小或者設定canvas元素的其他特性，
在頁面中加人了canvas元素后，可以通過Javascript來控制畫布，
可以在其中添加圖片/線條/文字等，也可以在里面進行繪圖設定/高級影片等，
canvas詳解
<canvas id="xxx" height=… width=…>…</canvas> 說明：
-
id，canvas元素的標識id
-
height，畫布高度，單位為像素
-
width，畫布寬度，單位為像素
-
<canvas></canvas>之間指定當瀏覽器不支持canvas時顯示的字串
在網頁中創建canvas畫布
<canvas id="mycanvas" height=600 width=400>您的瀏覽器不支持 canvas，</canvas>
在Chrome等支持HTML5的瀏覽器創建一個慷訓布，什么都不顯示，ie8以下會顯示您的瀏覽器不支持 canvas，
使用JavaScript獲取網頁中的canvas物件
-
在JavaScript中，可以使用document.getElementById()方法獲取網頁中指定id值的物件：
document.getElementById(元素的id屬性) -
獲取id屬性值為mycanvas物件的代碼如下：
<script type="text/javascript">var c=document.getElementById("mycanvas");</script>
-
得到的物件c即為mycanvas物件，
-
要在其中繪圖還需要獲得mycanvas物件的2d渲染背景關系（canvasRenderingContext2D）物件：
var ctx=c.getContext("2d");
canvas坐標系
canvas元素構建的畫布，是一個基于二維(x,y)的網格，
坐標原點(0,0)位于canvas的左上角，
-
從原點延x軸從左到右，取值依次遞增，
-
從原點延y軸從上到下，取值依次遞增，
繪制圖形：繪制直線
在網頁中使用canvas元素定義一個canvas畫布，用于繪畫
<canvas id="mycanvas" height=… width=…>...</canvas> 使用JavaScript獲取網頁中的canvas物件，并獲取canvas物件的2d背景關系
var ctx = document.getElementById("mycanvas").getContext("2d"); 呼叫beginPath()方法，指示開始創建路徑
ctx.beginPath(); 呼叫moveTo(x, y)方法，將坐標移至起點(x,y)
ctx.moveTo(x，y); 呼叫lineTo(x, y)方法，創建直線至點(x,y)的路徑
ctx.lineTo(x，y); 呼叫stroke()方法，繪制路徑
ctx.stroke(); 畫一條起點為(10, 10)、終點為(50, 50)的直線，
<canvas id="mycanvas" height=100 width=100>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawline(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的背景關系（2d繪圖環境）ctx.beginPath(); // 開始創建路徑ctx.moveTo(10,10); // 創建路徑的起點ctx.lineTo(50,50); // 添加路徑中的一個點ctx.stroke(); // 繪制路徑}window.addEventListener("load", drawline, false);//頁面加載時觸發drawline函式畫直線</script>
使用連續畫線的方法繪制一個三角形???????
<canvas id="mycanvas" height=100 width=100>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawtriangle(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的2d背景關系ctx.beginPath(); // 開始創建路徑ctx.moveTo(10,10); // 將坐標移至路徑起點ctx.lineTo(10,100); // 向路徑中添加一個點ctx.lineTo(100,100); // 向路徑中添加一個點ctx.lineTo(10,10); // 向路徑中添加一個點ctx.stroke(); // 繪制路徑}window.addEventListener("load", drawtriangle, true);//頁面加載時觸發drawtriangle函式畫三角形</script>
繪制圖形：繪制矩形
使用rect()方法繪制矩形路徑???????
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawRect(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的2d背景關系ctx.beginPath(); // 開始創建路徑ctx.rect(20,20, 100, 50); // 創建左上頂點為(20, 20)、長100、寬50的矩形路徑ctx.stroke(); //繪制路徑}window.addEventListener("load", drawRect, true); //頁面加載時呼叫drawRect函式畫矩形</script>
使用strokeRect()方法繪制矩形路徑
-
不需要使用beginPath()和stroke()即可繪制矩形邊框
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawRect(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的2d背景關系//ctx.beginPath(); // 開始創建路徑//ctx.rect(20,20, 100, 50); // 創建左上頂點為(20, 20)、長100、寬50的矩形路徑ctx. strokeRect(20,20, 100, 50);//ctx.stroke(); //繪制路徑}window.addEventListener("load", drawRect, true); //頁面加載時呼叫drawRect函式畫矩形</script>
使用fillRect()方法填充矩形
-
不需要使用beginPath()和stroke()即可繪制矩形填充
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawRect(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的2d背景關系//ctx.beginPath(); // 開始創建路徑ctx. fillRect(20,20, 100, 50);//ctx.stroke(); //繪制路徑}window.addEventListener("load", drawRect, true); //頁面加載時呼叫drawRect函式畫矩形</script>
使用clearRect()方法清除矩形???????
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawRect(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的2d背景關系ctx. fillRect(20,20, 100, 50);ctx.clearRect(40,40, 60, 10);}window.addEventListener("load", drawRect, true); //頁面加載時呼叫drawRect函式畫矩形</script>
繪制圖形：繪制圓弧
arc(x, y, radius, startingAngle, endingAngle, antiClockwise); 使用arc()方法僅僅是創建圓弧路徑，如需繪制路徑要再使用strock()方法
使用arc()方法繪制圓弧???????
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawArc(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的背景關系（2d繪圖環境）ctx.beginPath(); // 開始創建路徑ctx.arc(50, 50, 30, 1.1 * Math.PI, 1.9 * Math.PI, false);ctx.stroke(); // 繪制路徑}window.addEventListener("load", drawArc, true);</script>
使用arc()方法畫圓???????
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawArc(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的背景關系（2d繪圖環境）ctx.beginPath(); // 開始創建路徑ctx.arc(50, 50, 30, 0, 2 * Math.PI, false);ctx.stroke(); // 繪制路徑}window.addEventListener("load", drawArc, true);</script>
小結：
-
路徑path（僅有路徑是不會有任何顯示效果的）
-
描邊stroke（繪制路徑/繪制路徑的輪廓）
-
填充fill（繪制路徑內部）
通過設定canvasRenderingContext2D物件的以下屬性指定描邊的顏色和描邊的寬度，
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas， </canvas><script type="text/javascript">function strokeColorAndWidth(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的背景關系（2d繪圖環境）ctx.lineWidth = 5;ctx.strokeStyle = "red";ctx.beginPath(); // 開始創建路徑ctx.moveTo(10,10); // 創建路徑的起點ctx.lineTo(100,100); // 添加路徑中的一個點ctx.stroke(); //繪制路徑ctx.strokeStyle = "yellow";ctx.strokeRect(25,25, 80, 60); //矩形ctx.strokeStyle = "blue";ctx.beginPath(); // 開始創建路徑ctx.arc(100, 70, 40, 0, 2 * Math.PI, false); //圓形ctx.stroke(); //繪制路徑}window.addEventListener("load", strokeColorAndWidth, true);</script>
指定如何繪制線段的末端
-
通過設定canvasRenderingContext2D物件的lineCap屬性可以指定線段的末端如何繪制
-
lineCap 屬性只有繪制較寬線段時才有效
ctx.lineWidth = 20;ctx.strokeStyle = "red";ctx.lineCap = "butt";ctx.beginPath();ctx.moveTo(10,10);ctx.lineTo(80,10);ctx.stroke();ctx.lineCap = "round";ctx.beginPath();ctx.moveTo(10,40);ctx.lineTo(80,40);ctx.stroke();ctx.lineCap = "square";ctx.beginPath();ctx.moveTo(10,70);ctx.lineTo(80,70);ctx.stroke();
畫一個正六邊形
思路提示：一個六邊形是由六根直線組合的，那么可以通過計算坐標，把直線連接起來，就是六條直線合起來的正六邊形啦
???????
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawline(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的背景關系（2d繪圖環境）ctx.lineWidth = 10;ctx.strokeStyle = "red";ctx.beginPath(); // 開始創建路徑ctx.moveTo(80,80); // 創建路徑的起點ctx.lineTo(160,80); // 添加路徑中的一個點ctx.stroke(); // 繪制路徑ctx.moveTo(156,80); // 創建路徑的起點ctx.lineTo(196,149.5); // 添加路徑中的一個點ctx.stroke(); // 繪制路徑ctx.moveTo(196,147); // 創建路徑的起點ctx.lineTo(156,219); // 添加路徑中的一個點ctx.stroke(); // 繪制路徑ctx.moveTo(160,219); // 創建路徑的起點ctx.lineTo(80,219); // 添加路徑中的一個點ctx.stroke(); // 繪制路徑ctx.moveTo(84,219); // 創建路徑的起點ctx.lineTo(44,147); // 添加路徑中的一個點ctx.stroke(); // 繪制路徑ctx.moveTo(44,149.5); // 創建路徑的起點ctx.lineTo(84,80); // 添加路徑中的一個點ctx.stroke(); // 繪制路徑}window.addEventListener("load", drawline, false);//頁面加載時觸發drawline函式畫直線</script>
畫一個笑臉
<canvas id="mycanvas" height=500 width=500>您的瀏覽器不支持 canvas，</canvas><script type="text/javascript">function drawArc(){var c=document.getElementById("mycanvas"); // 獲取網頁中的canvas物件var ctx=c.getContext("2d"); //獲取canvas物件的背景關系（2d繪圖環境）ctx.beginPath(); // 開始創建路徑ctx.arc(250, 250, 100, 0, 2 * Math.PI, false);ctx.fillStyle = "yellow";ctx.fill();ctx.stroke(); // 繪制路徑ctx.beginPath(); // 開始創建路徑ctx.arc(200, 200, 10, 0, 2 * Math.PI, false);ctx.fillStyle = "gray";ctx.fill();ctx.stroke(); // 繪制路徑ctx.beginPath(); // 開始創建路徑ctx.arc(300, 200, 10, 0, 2 * Math.PI, false);ctx.fillStyle = "gray";ctx.fill();ctx.stroke(); // 繪制路徑ctx.beginPath(); // 開始創建路徑ctx.arc(250, 280, 40,0.8* Math.PI, 0.2* Math.PI, true);ctx.stroke(); // 繪制路徑}window.addEventListener("load", drawArc, true);</script>
送書活動
參與方式一：
點贊、收藏、評論本文，即可直接參與，3天內會公布抽獎資訊和聯系你，
參與方式二：
關注「資訊技術智庫」回復「送書」
本期3本，如有需要可等下期活動或自行安排：
《人工智能數學基礎》https://item.jd.com/13009168.html
《Python神經網路入門與實戰》 https://item.jd.com/12748581.html
《Python入門到人工智能實戰》https://item.jd.com/12648361.html
《Python量化金融編程從入門到精通》https://item.jd.com/13045490.html
?
添加公眾號「資訊技術智庫」：
🍅 硬核資料：20G，8大類資料，關注即可領取（PPT模板、簡歷模板、技術資料）
🍅 技識訓助：技術群大佬指點迷津，你的問題可能不是問題，求資源在群里喊一聲，
🍅 面試題庫：由各個技術群小伙伴們共同投稿，熱乎的大廠面試真題，持續更新中，
🍅 知識體系：含編程語言、演算法、大資料生態圈組件（Mysql、Hive、Spark、Flink）、資料倉庫、前端等，
👇👇送書抽獎丨技識訓助丨粉絲福利👇👇
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/316672.html
標籤：其他
上一篇：cgb2108-day11
下一篇：用線性型別降低高階函式