【Canvas】(1)—概述+簡單示例
- 2020 年 4 月 15 日
- 筆記
- 【前端】--HTML+CSS
Canvas—概述+簡單示例
如果通俗的去理解Canvas,我們可以去理解成它類似於我們電腦自帶的畫圖工具一樣，canvas首先是選擇一塊畫布，然後在這個畫布上描繪我們想畫的東西，畫好後展示給用戶看。
當然它不僅可以畫動態圖片，甚至可以畫出3D效果出來。
一、canvas概述
1、什麼是canvas
canvas 是HTML5提供的一種新標籤。
<canvas></canvas>
canvas 標籤只是圖形容器，相當於一個畫布，canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成，相當於使用畫筆在畫布上畫畫。
canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加影像的方法。
2、canvas的特性
1.互動性：canvas支援互動，可以很好的響應用戶的操作，我們可以通過Javascript來監鍵盤，滑鼠，及其觸摸設備相關事件。
2.動 畫：任何被canvas繪製的圖形都可以添加動畫，簡單的彈跳球或者複雜的HTML5遊戲都可以實現。
3.靈活性：開發人員可以使用canvas來繪製任何的內容，比如，直線，圖形，文字，圖片等，可以包含動畫或者不包含。同時你可以添加音頻或者影片瀏覽器支援。
4.流行度：canvas目前很流行，很多的開發人員都使用它來開發類似遊戲或者繪圖類應用。
5.web標準：只需要有瀏覽器就可以運行，而非flash或者silverlight，需要安裝相關的插件。
3、canvas應用領域
1.可視化數據： 各類統計圖表，比如:百度的echart
2.場景秀：用canvas實現動態的廣告效果能夠非常融洽的跨平台運行。如:手機中微產品.在移動端兼容性很好。
3.遊戲：canvas在基於Web的影像顯示方面比Flash更加立體、更加精巧，canvas成為HTML5小遊戲開發首選。
4.其他可嵌入網站的內容 (多用於活動頁面、特效)：類似圖表、音頻、影片，還有許多元素能夠更好地與Web融合，並且不需要任何插件。
5.趨勢=> 模擬器： 無論從視覺效果還是核心功能方面來說，模擬器產品可以完全由JavaScript來實現。模擬真實硬體環境,如移動端各種類型手機.
6.趨勢=> 遠程電腦控制： Canvas可以讓開發者更好地實現基於Web的數據傳輸，構建一個完美的可視化控制介面。
7.趨勢=> 圖形編輯器： Photoshop圖形編輯器將能夠100%基於Web實現。
二、canvas繪圖基礎
1、繪製畫布
<body>
<!--1.準備畫布 畫布默認白色的 默認長寬300*150-->
<!--1.1 設置畫布的大小 width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.準備繪製工具-->
<script>
/*1.獲取元素*/
var myCanvas = document.querySelector('canvas');
/*2.獲取上下文 繪製工具箱 2d代表是2d效果 3d就是指3d效果 3d只有IE11才支援*/
var ctx = myCanvas.getContext('2d');
</script>
</body>
context 是一個封裝了很多繪圖功能的對象，我們在頁面中創建一個 canvas 標籤之後，首先要使用 getContext() 獲取 canvas 的上下文環境getContext(“2d”) 對象是內
建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字元以及添加影像的方法。
以上程式碼我們通過canvas取到2D的context。在HTML5 Canvas的2D結構中，坐標（0,0）在左上方，這和傳統的坐標不太一樣。大家需要注意一下，如下圖所示：
2、 繪製基本路徑
1)、繪製起點(moveTo)
* 語法：ctx.moveTo(x, y);
* 解釋：設置上下文繪製路徑的起點。相當於移動畫筆到某個位置
* 參數：x,y 都是相對於 canvas盒子的最左上角。
* 注意：**繪製線段前必須先設置起點，不然繪製無效。**
2)、繪製直線(lineTo)
* 語法：ctx.lineTo(x, y);
* 解釋：從x,y的位置繪製一條直線到起點或者上一個線頭點。
* 參數：x,y 線頭點坐標。
3)、路徑開始和閉合
* 開始路徑：ctx.beginPath();
* 閉合路徑：ctx.closePath();
* 解釋：如果複雜路徑繪製，必須使用路徑開始和結束。閉合路徑會自動把最後的線頭和開始的線頭連在一起。
* beginPath: 核心的作用是將 不同繪製的形狀進行隔離，
每次執行此方法，表示重新繪製一個路徑,跟之前的繪製的墨跡可以進行分開樣式設置和管理。
4)、描邊(stroke)
* 語法：ctx.stroke();
* 解釋：根據路徑繪製線。路徑只是草稿，真正繪製線必須執行stroke
5)、總結
canvas繪製的基本步驟：
第一步：獲得上下文 =>canvasElem.getContext('2d');
第二步：開始路徑規劃 =>ctx.beginPath()
第三步：移動起始點 =>ctx.moveTo(x, y)
第四步：繪製線(矩形、圓形、圖片...) =>ctx.lineTo(x, y)
第五步：閉合路徑 =>ctx.closePath();
第六步：繪製描邊 =>ctx.stroke();
三、繪製線示例
1、畫一條線
程式碼
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{ border: 2px solid #00CED1; }
</style>
</head>
<body>
<canvas width="300" height="200" ></canvas>
<script>
/*1.獲取元素*/
var myCanvas = document.querySelector('canvas');
/*2.獲取上下文 繪製工具箱 */
var ctx = myCanvas.getContext('2d');
/*3.移動畫筆*/
ctx.moveTo(100,100);
/*4.繪製直線 (軌跡，繪製路徑)*/
ctx.lineTo(200,100);
/*5.描邊*/
ctx.stroke();
</script>
</body>
</html>
運行效果
2、繪製平行線
程式碼
/*上面程式碼部分省略*/
/*第一條線*/
ctx.moveTo(100,100);
ctx.lineTo(200,100);
/*第二條線*/
ctx.moveTo(100,150);
ctx.lineTo(200,150);
/*描邊*/
ctx.stroke();
運行結果
3、繪製三角形
程式碼
/*1.繪製一個三角形*/
ctx.moveTo(100,100);
//第一條線
ctx.lineTo(150,100);
//第二條線
ctx.lineTo(150,150);
/*第三條線使用canvas的自動閉合 */
ctx.closePath();
//修改寬度
ctx.lineWidth = 5;
/*2.描邊*/
ctx.stroke();
運行結果
4、繪製正方形
程式碼
/*1.繪製兩個正方形 一大200一小100 套在一起*/
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();
//第二個正方形
ctx.moveTo(150,150);
ctx.lineTo(150,250);
ctx.lineTo(250,250);
ctx.lineTo(250,150);
ctx.closePath();
/*2.去填充*/
//ctx.stroke();
ctx.fillStyle = 'red';
ctx.fill();
運行結果
重點： 在上面填充的時候回遵循非零環繞規則,這句話要理解是挺好理解的，解釋起來不大好解釋，具體可以參考這篇文章Canvas教程(21)——非零環繞原則
5、設置樣式
這裡展示一些常用的設置樣式的方法，具體就不做示例演示了。
- lineWidth 線寬，默認1px
- lineCap 線末端類型：(butt默認)、round、square
- lineJoin 相交線的拐點 miter(默認)、round、bevel
- strokeStyle 線的顏色
- fillStyle 填充顏色
- setLineDash() 設置虛線
- getLineDash() 獲取虛線寬度集合
- lineDashOffset 設置虛線偏移量（負值向右偏移）
參考
1、 Canvas概述
別人罵我胖，我會生氣，因為我心裡承認了我胖。別人說我矮，我就會覺得好笑，因為我心裡知道我不可能矮。這就是我們為什麼會對別人的攻擊生氣。
攻我盾者，乃我內心之矛(9)
)。
