文章目錄
什麼是Canvas？
canvas 元素用於在網頁上繪製圖形。
| – |
|---|
| canvas只是圖形容器，是一個矩形區域，並沒有繪製能力，有一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。 |
| canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。 |
創建 Canvas 元素
向 HTML5 頁面添加 canvas 元素。
規定元素的 id、寬度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通過 JavaScript 來繪製
canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：
JavaScript 使用 id 來尋找 canvas 元素：
var c=document.getElementById("myCanvas");
然後，創建 context 對象：
var cxt=c.getContext("2d");
canvas的座標
通過設置getContext(‘2d’)讓canvas獲得一個2d環境。
默認情況下canvas 的左上角座標 (0,0)爲座標原點，沿x軸向右爲正值，沿y軸向下爲正值，canvas的轉換會對座標系統進行變換。
canvas的顏色、樣式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設置或返回用於填充繪畫的顏色、漸變或模式 |
| strokeStyle | 設置或返回用於筆觸的顏色、漸變或模式 |
| shadowColor | 設置或返回用於陰影的顏色 |
| shadowBlur | 設置或返回用於陰影的模糊級別 |
| shadowOffsetX | 設置或返回陰影距形狀的水平距離 |
| shadowOffsetY | 設置或返回陰影距形狀的垂直距離 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 創建線性漸變（用在畫布內容上） |
| createPattern() | 在指定的方向上重複指定的元素 |
| createRadialGradient() | 創建放射狀/環形的漸變（用在畫布內容上） |
| addColorStop() | 規定漸變對象中的顏色和停止位置 |
canvas的線條樣式
| 屬性 | 描述 |
|---|---|
| lineCap | 設置或返回線條的結束端點樣式 |
| lineJoin | 設置或返回兩條線相交時，所創建的拐角類型 |
| lineWidth | 設置或返回當前的線條寬度 |
| miterLimit | 設置或返回最大斜接長度 |
canvas的路徑
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖（路徑） |
| stroke() | 繪製已定義的路徑 |
| beginPath() | 起始一條路徑，或重置當前路徑 |
| closePath() | 創建從當前點回到起始點的路徑 |
| moveTo(x,y) | 把路徑移動到畫布中的指定點，不創建線條 |
| lineTo(x,y) | 添加一個新點，然後在畫布中創建從該點到最後指定點的線條 |
| clip() | 從原始畫布剪切任意形狀和尺寸的區域 |
| quadraticCurveTo() | 創建二次貝塞爾曲線 |
| bezierCurveTo() | 創建三次方貝塞爾曲線 |
| arc(x,y,r,start,stop) | 創建弧/曲線（用於創建圓形或部分圓） |
| arcTo() | 創建兩切線之間的弧/曲線 |
| isPointInPath() | 如果指定的點位於當前路徑中，則返回 true，否則返回 false |
canvas的矩形
| 方法 | 描述 |
|---|---|
| rect() | 創建矩形 |
| fillRect() | 繪製“被填充”的矩形 |
| strokeRect() | 繪製矩形（無填充） |
| clearRect() | 在給定的矩形內清除指定的像素 |
canvas的轉換
| 方法 | 描述 |
|---|---|
| scale() | 縮放當前繪圖至更大或更小 |
| rotate() | 旋轉當前繪圖 |
| translate() | 重新映射畫布上的 (0,0) 位置 |
| transform() | 替換繪圖的當前轉換矩陣 |
| setTransform() | 將當前轉換重置爲單位矩陣。然後運行 transform() |
canvas的文本
| 屬性 | 描述 |
|---|---|
| font | 設置或返回文本內容的當前字體屬性 |
| textAlign | 設置或返回文本內容的當前對齊方式 |
| textBaseline | 設置或返回在繪製文本時使用的當前文本基線 |
| 方法 | 描述 |
|---|---|
| fillText(text,x,y) | 在畫布上繪製“被填充的”文本 |
| strokeText(text,x,y) | 在畫布上繪製文本（無填充） |
| measureText() | 返回包含指定文本寬度的對象 |
canvas的拓展
| 方法 | 描述 |
|---|---|
| drawImage() | 向畫布上繪製圖像、畫布或視頻 |
| getContext() | 獲得用於在畫布上繪圖的對象 |
| toDataURL() | 導出在 canvas 元素上繪製的圖像 |
toDataURL的拓展
畫布允許drawImage()使用跨域 <img> 元素的圖像，但是這會污染畫布。
一旦畫布被污染，就無法讀取其數據。例如，不能再使用畫布的 toBlob(), toDataURL() 或 getImageData() 方法。
瀏覽器爲了保護你的隱私，避免未經許可拉取遠程網站信息而導致的用戶隱私泄露。
通過:
img.setAttribute('crossOrigin', 'anonymous')
可以繞過瀏覽器。
但是當你的網頁上有該圖片 <img>時，由於瀏覽器第一次已經把圖片加載並緩存下來，在畫布上第二次請求該圖片時，不需要再從服務端請求，而直接從緩存裏取。
第一次已經把圖片加載時是沒帶img.setAttribute(‘crossOrigin’, ‘anonymous’)，在畫布上第二次請求該圖片從緩存裏取，拿到的是不帶img.setAttribute(‘crossOrigin’, ‘anonymous’)的圖片，此時不能再使用畫布的 toBlob(), toDataURL() 或 getImageData() 方法。
解決辦法是在畫布上第二次請求該圖片時，圖片鏈接攜帶隨機數（比如時間戳），這樣該圖片會去服務器加載，並通過img.setAttribute(‘crossOrigin’, ‘anonymous’)繞過瀏覽器了。
canvas與SVG
| Canvas | SVG |
|---|---|
| 通過 JavaScript 來繪製 2D 圖形 | 通過XML 描述 2D 圖形 |
| 依賴分辨率 | 不依賴分辨率 |
| 不支持事件處理器 | 支持事件處理器 |
| 弱的文本渲染能力 | 複雜度高會減慢渲染速度 |
| 能夠以 .png 或 .jpg 格式保存結果圖像 | |
| 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪 | 不適合遊戲應用 |
HTML 知識題
| 題目 | 答案 |
|---|---|
| HTML5 中的 <canvas> 元素用於？ | 繪製圖形 |
| 在 HTML5 中，哪個屬性用於規定輸入字段是必填的？ | required |
| HTML5具有的存儲類型？ | sessionStorage、localStorage、Cookies |
| 在<video>中，使媒介文件循環播放的屬性 | loop |
| 在 <html> 中，設置網頁的背景圖的屬性是 | background |
| 在<table>中，設置表格的背景顏色的屬性是？ | bgcolor |
| 圖像無法顯示時的替代文本的屬性是？ | alt |