走進HTML5，Canvas一探究竟

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

簡介

Canvas 是 HTML5 新增的一個標籤屬性，一個可使用腳本在其中繪製圖像的 HTML 元素。它能夠用來製做照片或者製做簡單的動畫，甚至能夠進行實時的視頻處理和渲染。Canvas 是由 HTML 代碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript 代碼能夠訪問該區域，相似於其餘通用的 API，經過一套完整的繪圖函數來動態生成圖形。

應用場景

1. 遊戲
2. 圖表
3. 動畫
4. HTML5 動效(codepen.io)

如何使用 Canvas

• 添加 canvas 標籤

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

• 得到 canvas 元素

const canvas = document.getElementById("myCanvas");
複製代碼

• 得到 canvas 上下文對象

const ctx = canvas.getContext("2d");
// 有兩個參數getContext()能夠採起。一個是渲染2D元素的標準2d上下文。另外一種使用的webGL技術仍處於起步階段。所以，大多數狀況下，您能夠在任何地方找到第二個畫布的上下文（截至目前）
複製代碼

兩個對象

1. 元素對象(canvas 元素)和上下文對象(經過getContext('2d)方法獲取到的 CanvasRenderingContext2D 對象)
2. 元素對象相對於咱們的畫布，上下文對象至關於畫筆，咱們接下來的全部操做是基於上下文對象的。

線段

ctx.moveTo(x, y); // 移動到x, y座標點
ctx.lineTO(x, y); // 從當前點繪製直線到x, y點
ctx.stroke(); // 描邊
ctx.lineWidth() = 20; // 設置線段寬度
ctx.closePath(); // 閉合當前路徑 和 回到起始點是有區別的
ctx.fill(); // 填充
複製代碼

• 注意:
  • fill 和 stroke方法都是做用在當前的全部子路徑
  • 完成一條路徑後要從新開始另外一條路徑時必須使用 beginPath() 方法，beginPath 開始子路徑的一個新的集合

代碼示例

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 20;
ctx.moveTo(100, 50);
ctx.lineTo(100, 100);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke();
ctx.moveTo(200, 200);
ctx.strokeStyle = "#000";
ctx.stroke();
複製代碼

矩形

// 繪製矩形路徑 左上角座標爲(x, y)，寬 高爲dx dy。
ctx.rect(x, y, dx, dy);
// 填充向一個矩形區域填充顏色。 左上角座標爲(x, y)，寬 高爲dx dy。
ctx.fillRect(x, y, dx, dy);
// 繪製一個矩形區域的邊框。 左上角座標爲(x, y)，寬 高爲w h。
ctx.strokeRect(x, y, w, h);
// 擦除指定矩形區域的像素顏色，等同於把早先的繪製效果都去除。
ctx.clearRect(x, y, dx, dy);
複製代碼

代碼示例

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

let y = 100;
function draw(y) {
  ctx.fillRect(100, y, 20, 20);
}
const timer = setInterval(() => {
  ctx.clearRect(0, 0, 500, 500);
  draw(y);
  y += 10;
  if (y > 480) {
    clearInterval(timer);
  }
}, 50);
複製代碼

弧形

arc(x, y, r, 起始弧度, 結束弧度, 弧形的方向); // 弧形方向爲 true 逆時針， false 順時針
// 角以弧度計
Math.PI / 180 * angle ==> 弧度
複製代碼

代碼示例

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 圓形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, (Math.PI / 180) * 360, true);
ctx.stroke();
ctx.closePath();
// 小扇形
ctx.beginPath();
ctx.moveTo(250, 100);
ctx.arc(250, 100, 50, 0, (Math.PI / 180) * 45, false);
ctx.lineTo(250, 100);
ctx.stroke();
ctx.closePath();
// 大扇形
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.arc(200, 200, 50, 0, (Math.PI / 180) * 45, true);
ctx.lineTo(200, 200);
ctx.stroke();
ctx.closePath();
複製代碼

圓角

ctx.arcTo(x1, y1, x2, y2, r); // 繪製的弧線與當前點和 x1, y1 和 x2, y2鏈接都相切
複製代碼

代碼示例

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 繪製圓角矩形
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.arcTo(200, 50, 200, 150, 30);
ctx.arcTo(200, 150, 100, 150, 30);
ctx.arcTo(100, 150, 100, 50, 30);
ctx.arcTo(100, 50, 200, 50, 30);
ctx.closePath();
ctx.stroke();
複製代碼

貝塞爾曲線

// 二次貝塞爾曲線
// x1, y1 控制點 ex, ey 結束點
quadraticCurveTo(x1, y1, ex, ey);
// 三次貝塞爾曲線
// x1, y1, x2, y2 控制點 ex, ey 結束點
bezierCurveTo(x1, y1, x2, y2, ex, ey);
複製代碼

座標軸轉換

translate(dx, dy); // 從新映射畫布上的(0, 0)位置
scale(sx, sy); // 縮放當前繪圖
rotate(Math.PI); // 旋轉當前的繪圖
save(); // 保存當前圖像狀態的一份拷貝
restore(); // 從棧中彈出存儲的圖像狀態並恢復
setTransform(a, b, c, d, e, f); // 先重置再變換
// 參數：水平旋轉 水平傾斜 垂直傾斜 垂直縮放 水平移動 垂直移動
transform(a, b, c, d, e, f); // 在以前的基礎上變換
複製代碼

填充圖案

createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");
複製代碼

漸變

// 必須在填充漸變的區域裏定義漸變，不然沒效果
// 線性漸變
createLinearGradient(x1, y1, x2, y2);
// 徑向漸變
createRedialGradient(x1, y1, x2, y2);
bg.addColorStop(p, color);
複製代碼

代碼示例

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 線性漸變
let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
// 徑向漸變
let gradient1 = ctx.createRadialGradient(280, 280, 50, 300, 300, 200);
gradient1.addColorStop(0, "white");
gradient1.addColorStop(1, "green");
ctx.fillStyle = gradient1;
ctx.fillRect(200, 200, 300, 300);
複製代碼

陰影

ctx.shadowColor; // 陰影的顏色，默認爲black
ctx.shadowOffsetX; // 陰影的水平位移，默認爲0
ctx.shadowOffsetY; // 陰影的垂直位移，默認爲0
ctx.shadowBlur; // 陰影的模糊程度，默認爲0
// 這裏的陰影偏移量不受座標系變換的影響
複製代碼

文本

fillText(); // 在指定位置繪製實心字符
strokeText(); // 在指定位置繪製空心字符
ctx.font; // 指定字型大小和字體，默認值爲 10px sans-serif
ctx.textAlign; // 文本的對齊方式，默認值爲start
ctx.direction; // 文本的方向，默認值爲inherit
ctx.textBaseline; // 文本的垂直位置，默認值爲alphabetic
複製代碼

代碼示例

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "Bold 20px Arial";
ctx.strokeText("Hello world", 50, 50);
ctx.fillText("Hello world", 100, 100);
複製代碼

線段樣式

• lineGap 指定線條末端的樣式
  • butt（默認值，末端爲矩形）
  • round（末端爲圓形）
  • square（末端爲突出的矩形，矩形寬度不變，高度爲線條寬度的一半）。
• lineJoin 指定線段交點的樣式
  • round（交點爲扇形）
  • bevel（交點爲三角形底邊）
  • miter（默認值，交點爲菱形)
• ctx.miterLimit 指定交點菱形的長度，默認爲 10

當 lineJoin 是 miter 時，用於控制斜接部分的長度，若是斜接長度超過 miterLimit 的值，變成 bevel

代碼示例

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 20;
ctx.lineJoin = "miter";
ctx.miterLimit = 20;
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(100, 110);
ctx.closePath();
ctx.stroke();
複製代碼

裁剪

// 當前路徑外的區域不在繪製
ctx.clip();
// 可在clip() 前用save()方法保存，後續經過restore()方法恢復
複製代碼

代碼示例

<canvas id="myCanvas" width="500" height="500"></canvas>
複製代碼

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2, 0);
ctx.closePath();
ctx.clip();
ctx.fillRect(100, 100, 300, 300);
ctx.strokeRect(100, 100, 400, 400);
複製代碼

全局透明度

ctx.globalAlpha = "0.5";
複製代碼

繪製圖片

// 第一個參數是img(image,canvas,video)
// 要在 onload 後再繪製
ctx.drawImage();
// 3 個參數
// 起始點座標
x, y;
// 5個參數
// 起始點座標及圖片所存區域的寬高
x, y, dx, dy;
// 9個參數
// 前四個爲所繪製目標元素的起始點和寬高，後四個爲canvas繪製的起始點和大小
x1, y1, dx1, dy1, x2, y2, w2, h2;
複製代碼

let img = new Image();
img.onload = function() {
  ctx.drawImage();
};
img.src = "";
複製代碼

如何解決 Canvas 高分屏模糊問題

在分辨率比較高的屏幕，例如 ip6/6s/mac 等機器上，由於 canvas 繪製的是位圖，因此會致使模糊，解決方法是根據屏幕分辨率修改 canvas 樣式代碼中的寬和高與 canvas 的 width 和 height 屬性的比例

---

但願對讀完本文的你有幫助、有啓發，若是有不足之處，歡迎批評指正交流！

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

辛苦整理良久，還望手動點贊鼓勵~

---

'摘抄'不是單純的「粘貼->複製」，而是眼到，手到，心到的一字一句敲打下來。

博客聲明:全部轉載的文章、圖片僅用於做者本人收藏學習目的，被要求或認爲適當時，將標註署名與來源。若不肯某一做品被轉用，請及時通知本站，本站將予以及時刪除。