HTML5 Canvas的事件處理（無需循環重繪和事

HTML5 Canvas的事件處理（無需循環重繪和事件冒泡）

Canvas里，所有圖形都繪制在幀上，繪制方法不會將繪制好的圖形元素作為一個返回值輸出，js也無法獲取到已經繪制好的圖形元素，在Canvas中繪制的圖形都是一個整體。

假設用Canvas繪制了一個圖形，要判斷一個事件是否發生在該圖形上，有個isPointInPath方法，但是該方法僅判斷當前上下文環境中的路徑，所以當Canvas里已經繪制了多個圖形時，僅能以最后一個圖形的上下文環境來判斷事件。這種問題的解決方法是：當事件發生時，重繪所有圖形，每繪制一個就使用isPointInPath方法，判斷事件坐標是否在該圖形覆蓋范圍內。當圖形過多時，為了在性能和視覺效果上達到更好的效果，我們可以采取一種數學方法。

多個矩形框

如圖，紅色部分是由很多個矩形框拼接而成的平滑區域。需求是當鼠標移至矩形框上時出現文本提示框來顯示當前是第幾個矩形。下圖是這些矩形框的坐標：

坐標

接下來繪制矩形框：

繪制

判斷一個點是否在矩形框內的數學方法為：假設點為o，矩形為abcd，如果Soab+Sobc+Socd+Soda=Sabcd，則該點在矩形框內，否則不在。

判斷

涉及到的函數有：計算兩點之間距離、計算三角形面積、判斷點是否在矩形內。當鼠標移動的時候，循環判斷鼠標坐標點是否在矩形框內，在的話就出現提示框。為了減少判斷、提高性能，創建一個函數用于計算矩形框的水平跨度，即X軸范圍，當目標點不在該范圍內就不做是否在矩形框內的判斷。

事件處理程序

其中minmax是一個二維數組，保存著所有矩形框的X軸跨度。

當條件成立時，效果如下，即顯示文本：

效果

家好！歡迎來到本教程，我們將深入了解使用 HTML 畫布和 JavaScript 在代碼中創建有趣的氣泡的世界。最好的部分？我們將只使用一點 HTML 和所有 JavaScript，而不是 CSS 來實現所有這一切。

揭示概念

今天，我們要掌握以下幾個概念：

使用畫布上下文的 arc 方法創建圓。

利用 requestAnimationFrame 函數實現平滑的圓形動畫。

利用 JavaScript 類的強大功能來創建多個圓圈，而無需重復代碼。

向我們的圓圈添加描邊樣式和填充樣式以獲得 3D 氣泡效果。

你可以跟著我一起看，或者如果你想看源代碼，可以使用最終的codepen

入門

首先，我們需要一個 HTML5 Canvas 元素。 Canvas 是創建形狀、圖像和圖形的強大元素。這就是氣泡將產生的地方。讓我們來設置一下 -

<canvas id="canvas"></canvas>

為了使用畫布做任何有意義的事情，我們需要訪問它的上下文。 Context 提供了在畫布上渲染對象和繪制形狀的接口。

讓我們訪問畫布及其上下文。

const canvas=document.getElementById('canvas');
const context=canvas.getContext('2d');

我們將設置畫布以使用整個窗口的高度和寬度 -

canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

讓我們通過添加一些 css 為畫布提供一個漂亮的舒緩淺藍色背景。這是我們要使用的唯一 CSS。如果您愿意，也可以使用 JavaScript 來完成此操作。

#canvas {
  background: #00b4ff;
}

是時候創造泡泡了！

讓我們進入有趣的部分。我們將通過單擊畫布來創建氣泡。為了實現這一點，我們首先創建一個點擊事件處理程序：

canvas.addEventListener('click', handleDrawCircle);

由于我們需要知道在畫布上單擊的位置，因此我們將在句柄 DrawCircle 函數中跟蹤它并使用事件的坐標 -

//We are adding x and y here because we will need it later.
let x, y
const handleDrawCircle=(event)=> {
  x=event.pageX;
  y=event.pageY;

// Draw a bubble!
  drawCircle(x, y);
};

用圓弧法畫圓

為了創建圓圈，我們將利用畫布上下文中可用的 arc 方法。 Arc 方法接受 x 和 y - 圓心、半徑、起始角和結束角，對于我們來說，這將是 0 和 2* Math.PI，因為我們正在創建一個完整的圓。

const drawCircle=(x, y)=> {
  context.beginPath();
  context.arc(x, y, 50, 0, 2 * Math.PI);

  context.strokeStyle='white';
  context.stroke();
};

使用 requestAnimationFrame 方法移動圓圈

現在我們有了圓圈，讓我們讓它們移動，因為……

GIF

請記住，當我們創建圓時，我們使用了 arc 方法，它接受 x 和 y 坐標 - 圓的中心。如果我們快速移動圓的 x 和 y 坐標，就會給人一種圓在移動的印象。讓我們試試吧！

//Define a speed by which to increment to the x and y coordinates

const dx=Math.random() * 3;
const dy=Math.random() * 7;//Increment the center of the circle with this speed
x=x + dx;
y=y - dy;

我們可以將其移至函數內 -

let x, y;

const move=()=> {
  const dx=Math.random() * 3;
  const dy=Math.random() * 7;  x=x + dx;
  y=y - dy;
};

為了讓我們的圓圈無縫移動，我們將創建一個動畫函數并使用瀏覽器的 requestAnimationFrame 方法來創建一個移動的圓圈。

const animate=()=> {
  context.clearRect(0, 0, canvas.width, canvas.height);

  move();
    drawCircle(x,y);  requestAnimationFrame(animate);
};//Don't forget to call animate at the bottom 
animate();

創建粒子：引入粒子類

現在我們已經創建了一個圓圈，是時候創建多個圓圈了！

但在我們創建多個圓圈之前，讓我們準備一下我們的代碼。為了避免重復我們的代碼，我們將使用類并引入 Particle 類。粒子是我們動態藝術作品和動畫的構建塊。每個氣泡都是一個粒子，具有自己的位置、大小、運動和顏色屬性。讓我們定義一個 Particle 類來封裝這些屬性：

class Particle {
  constructor(x=0, y=0) {}

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

讓我們將一些已設置的常量移至 Particle 類 -

class Particle {
  constructor(x=0, y=0) {
    this.x=x;
    this.y=y;
    this.radius=Math.random() * 50;
    this.dx=Math.random() * 3;
    this.dy=Math.random() * 7;
  }

  draw() {
    // Drawing the particle as a colored circle
    // ...
  }  move() {
    // Implementing particle movement
    // ...
  }
}

draw 方法將負責在畫布上渲染粒子。我們已經在drawCircle中實現了這個功能，所以讓我們將它移動到我們的類中并將變量更新為類變量

class Particle {
  constructor(x=0, y=0) {
    this.x=x;
    this.y=y;
    this.radius=Math.random() * 50;
    this.dx=Math.random() * 3;
    this.dy=Math.random() * 7;
    this.color='white';
  }

  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    context.strokeStyle=this.color;
    context.stroke();    context.fillStyle=this.color;
    context.fill();
  }  move() {}
}

同樣，讓我們在類中移動 move 函數 -

move() {
    this.x=this.x + this.dx;
    this.y=this.y - this.dy;
}

現在，我們需要確保在事件處理程序中調用 Particle 類。

const handleDrawCircle=(event)=> {
  const x=event.pageX;
  const y=event.pageY;

  const particle=new Particle(x, y);
};canvas.addEventListener('click', handleDrawCircle);

由于我們需要在 animate 函數中訪問該粒子，以便調用其 move 方法，因此我們將該粒子存儲在一個名為 molecularArray 的數組中。當創建大量粒子時，這個數組也會很有幫助。這是反映這一點的更新代碼 -

const particleArray=[];

const handleDrawCircle=(event)=> {
  const x=event.pageX;
  const y=event.pageY;  const particle=new Particle(x, y);
  particleArray.push(particle);
};canvas.addEventListener('click', handleDrawCircle);

記得也要更新動畫功能 -

此時，您將在屏幕上看到這個粒子 -

驚人的！現在，到了有趣的部分！讓我們創建很多圓圈并設計它們的樣式，使它們看起來像氣泡。

為了創建大量氣泡，我們將使用 for 循環創建粒子并將它們添加到我們在此處創建的粒子數組中。

const handleDrawCircle=(event)=> {
  const x=event.pageX;
  const y=event.pageY;

  for (let i=0; i < 50; i++) {
    const particle=new Particle(x, y);
    particleArray.push(particle);
  }
};canvas.addEventListener('click', handleDrawCircle);

在動畫函數中，我們將通過清除畫布并在新位置重新繪制粒子來不斷更新畫布。這會給人一種圓圈在移動的錯覺。

const animate=()=> {
  context.clearRect(0, 0, canvas.width, canvas.height);

  particleArray.forEach((particle)=> {
    particle?.move();
    particle?.draw();
  });  requestAnimationFrame(animate);
};animate();

現在我們有了移動的氣泡，是時候給它們添加顏色，使它們看起來像氣泡了！

我們將通過向氣泡添加漸變填充來實現此目的。這可以使用 context.createRadialGradient 方法來完成。

const gradient=context.createRadialGradient(
  this.x,
  this.y,
  1,
  this.x + 0.5,
  this.y + 0.5,
  this.radius
);

gradient.addColorStop(0.3, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.95, '#e7feff');context.fillStyle=gradient;

總結

恭喜！您剛剛僅使用 HTML Canvas 和 JavaScript 創建了一些超級有趣的東西。您已經學習了如何使用 arc 方法、利用 requestAnimationFrame、利用 JavaScript 類的強大功能以及使用漸變設計氣泡以實現 3D 氣泡效果。

請隨意嘗試顏色、速度和大小，使您的動畫真正獨一無二。

我希望您在學習本教程時能像我在創建它時一樣獲得樂趣。現在，輪到你進行實驗了。我很想看看你是否嘗試過這個以及你創造了什么。與我分享您的代碼鏈接，我很樂意查看。

文簡介

點贊 + 關注 + 收藏=學會了

在前端領域，如果只是懂 Vue 或者 React ，未來在職場的競爭力可能會比較弱。

根據我多年在家待業經驗來看，前端未來在數據可視化和 AI 這兩個領域會比較香，而 Canvas 是數據可視化在前端方面的基礎技術。

本文就用光的速度將 canvas 給入門了。

01.gif

要入門一個技術，前期最重要是快！所以本文只講入門內容，能應付簡單項目。深入的知識點會在其他文章講解。

文章同時收錄于小程序-互聯網小兵，不止于前端，收各平臺優質熱門的技術文章（后端、移動端、算法、人工智能...），大家支持支持，點擊前往體驗！

Canvas 是什么？

Canvas 中文名叫 “畫布”，是 HTML5 新增的一個標簽。
Canvas 允許開發者通過 JS在這個標簽上繪制各種圖案。
Canvas 擁有多種繪制路徑、矩形、圓形、字符以及圖片的方法。
Canvas 在某些情況下可以 “代替” 圖片。
Canvas 可用于動畫、游戲、數據可視化、圖片編輯器、實時視頻處理等領域。

Canvas 和 SVG 的區別

CanvasSVG用JS動態生成元素（一個HTML元素）用XML描述元素（類似HTML元素那樣，可用多個元素來描述一個圖形）位圖（受屏幕分辨率影響）矢量圖（不受屏幕分辨率影響）不支持事件支持事件數據發生變化需要重繪不需要重繪

就上面的描述而言可能有點難懂，你可以打開 AntV 旗下的圖形編輯引擎做對比。G6[1] 是使用 canvas 開發的，X6[2] 是使用 svg 開發的。

我的建議是：如果要展示的數據量比較大，比如一條數據就是一個元素節點，那使用 canvas 會比較合適；如果用戶操作的交互比較多，而且對清晰度有要求（矢量圖），那么使用 svg 會比較合適。

起步

學習前端一定要動手敲代碼，然后看效果展示。

起步階段會用幾句代碼說明 canvas 如何使用，本例會畫一條直線。

畫條直線

在 HTML 中創建 canvas 元素
通過 js 獲取 canvas 標簽
從 canvas 標簽中獲取到繪圖工具
通過繪圖工具，在 canvas 標簽上繪制圖形

02.png

<!-- 1、創建 canvas 元素 -->
<canvas
  id="c"
  width="300"
  height="200"
  style="border: 1px solid #ccc;"
></canvas>

<script>
  // 2、獲取 canvas 對象
  const cnv=document.getElementById('c')

  // 3、獲取 canvas 上下文環境對象
  const cxt=cnv.getContext('2d')

  // 4、繪制圖形
  cxt.moveTo(100, 100) // 起點坐標 (x, y)
  cxt.lineTo(200, 100) // 終點坐標 (x, y)
  cxt.stroke() // 將起點和終點連接起來
</script>
復制代碼

moveTo 、 lineTo 和 stroke 方法暫時可以不用管，它們的作用是繪制圖形，這些方法在后面會講到~

注意點

1、默認寬高

canvas 有 默認的寬度(300px) 和高度(150px)

如果不在 canvas 上設置寬高，那 canvas 元素的默認寬度是300px，默認高度是150px。

2、設置 canvas 寬高

canvas 元素提供了 width 和 height 兩個屬性，可設置它的寬高。

需要注意的是，這兩個屬性只需傳入數值，不需要傳入單位（比如 px 等）。

<canvas width="600" height="400"></canvas>
復制代碼

3、不能通過 CSS 設置畫布的寬高

使用 css 設置 canvas 的寬高，會出現 內容被拉伸 的后果！！！

03.png

<style>
  #c {
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
  }
</style>

<canvas id="c"></canvas>

<script>
  // 1、獲取canvas對象
  const cnv=document.getElementById('c')

  // 2、獲取canvas上下文環境對象
  const cxt=cnv.getContext('2d')

  // 3、繪制圖形
  cxt.moveTo(100, 100) // 起點
  cxt.lineTo(200, 100) // 終點
  cxt.stroke() // 將起點和終點連接起來

  console.log(cnv.width) // 獲取 canvas 的寬度，輸出：300
  console.log(cnv.height) // 獲取 canvas 的高度，輸出：150
</script>
復制代碼

canvas 的默認寬度是300px，默認高度是150px。

如果使用 css 修改 canvas 的寬高（比如本例變成 400px * 400px），那寬度就由 300px 拉伸到 400px，高度由 150px 拉伸到 400px。
使用 js 獲取 canvas 的寬高，此時返回的是 canvas 的默認值。

最后出現的效果如上圖所示。

4、線條默認寬度和顏色

線條的默認寬度是 1px ，默認顏色是黑色。

但由于默認情況下 canvas 會將線條的中心點和像素的底部對齊，所以會導致顯示效果是 2px 和非純黑色問題。

5、IE兼容性高

暫時只有 IE 9 以上才支持 canvas 。但好消息是 IE 已經有自己的墓碑了。

如需兼容 IE 7 和 8 ，可以使用 ExplorerCanvas [3]。但即使是使用了 ExplorerCanvas 仍然會有所限制，比如無法使用 fillText() 方法等。

基礎圖形

坐標系

在繪制基礎圖形之前，需要先搞清除 Canvas 使用的坐標系。

Canvas 使用的是 W3C 坐標系 ，也就是遵循我們屏幕、報紙的閱讀習慣，從上往下，從左往右。

04.jpg

W3C 坐標系 和 數學直角坐標系 的 X軸是一樣的，只是 Y軸的反向相反。

W3C 坐標系 的 Y軸正方向向下。

直線

一條直線

最簡單的起步方式是畫一條直線。這里所說的 “直線” 是幾何學里的 “線段” 的意思。

需要用到這3個方法：

moveTo(x1, y1)：起點坐標 (x, y)
lineTo(x2, y2)：下一個點的坐標 (x, y)
stroke()：將所有坐標用一條線連起來

起步階段可以先這樣理解。

05.png

<canvas id="c" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 繪制直線
  cxt.moveTo(50, 100) // 起點坐標
  cxt.lineTo(200, 50) // 下一個點的坐標
  cxt.stroke() // 將上面的坐標用一條線連接起來
</script>
復制代碼

上面的代碼所呈現的效果，可以看下圖解釋（手不太聰明，畫得不是很標準，希望能看懂）

06.jpg

多條直線

如需畫多條直線，可以用會上面那幾個方法。

07.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.stroke()

  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.stroke()
</script>
復制代碼

仔細觀察一下，為什么兩條線的粗細不一樣的？

明明使用的方法都是一樣的，只是第二條直線的 Y軸的值是有小數點。

答：默認情況下 canvas 會將線條的中心點和像素的底部對齊，所以會導致顯示效果是 2px 和非純黑色問題。

08.jpg

上圖每個格子代表 1px。

線的中心點會和畫布像素點的底部對齊，所以會線中間是黑色的，但由于一個像素就不能再切割了，所以會有半個像素被染色，就變成了淺灰色。

所以如果你設置的 Y軸值是一個整數，就會出現上面那種情況。

設置樣式

lineWidth：線的粗細
strokeStyle：線的顏色
lineCap：線帽：默認: butt; 圓形: round; 方形: square

09.png

<canvas id="c" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 繪制直線
  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)

  // 修改直線的寬度
  cxt.lineWidth=20

  // 修改直線的顏色
  cxt.strokeStyle='pink'

  // 修改直線兩端樣式
  cxt.lineCap='round' // 默認: butt; 圓形: round; 方形: square

  cxt.stroke()
</script>
復制代碼

新開路徑

開辟新路徑的方法：

beginPath()

在繪制多條線段的同時，還要設置線段樣式，通常需要開辟新路徑。

要不然樣式之間會相互污染。

比如這樣

10.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 第一條線
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.lineWidth=10
  cxt.strokeStyle='pink'
  cxt.stroke()

  // 第二條線
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.stroke()
</script>
復制代碼

如果不想相互污染，需要做2件事：

使用 beginPath() 方法，重新開一個路徑
設置新線段的樣式（必須項）

如果上面2步卻了其中1步都會有影響。

只使用beginPath()

11.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 第一條線
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.lineWidth=10
  cxt.strokeStyle='pink'
  cxt.stroke()

  // 第二條線
  cxt.beginPath() // 重新開啟一個路徑
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.stroke()
</script>
復制代碼

第一條線的樣式會影響之后的線。

但如果使用了 beginPath() ，后面的線段不會影響前面的線段。

12.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 第一條線
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.stroke()

  // 第二條線
  cxt.beginPath() // 重新開啟一個路徑
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.lineWidth=4
  cxt.strokeStyle='red'
  cxt.stroke()
</script>
復制代碼

設置新線段的樣式，沒使用beginPath()的情況

這個情況會反過來，后面的線能影響前面的線。

13.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 第一條線
  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.lineWidth=10
  cxt.strokeStyle='pink'
  cxt.stroke()

  // 第二條線
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.lineWidth=4
  cxt.strokeStyle='red'
  cxt.stroke()
</script>
復制代碼

正確的做法

在設置 beginPath() 的同時，也各自設置樣式。這樣就能做到相互不影響了。

14.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.moveTo(20, 100)
  cxt.lineTo(200, 100)
  cxt.lineWidth=10
  cxt.strokeStyle='pink'
  cxt.stroke()

  cxt.beginPath() // 重新開啟一個路徑
  cxt.moveTo(20, 120.5)
  cxt.lineTo(200, 120.5)
  cxt.lineWidth=4
  cxt.strokeStyle='red'
  cxt.stroke()
</script>
復制代碼

折線

和直線差不多，都是使用 moveTo() 、lineTo() 和 stroke() 方法可以繪制折線。

15.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.moveTo(50, 200)
  cxt.lineTo(100, 50)
  cxt.lineTo(200, 200)
  cxt.lineTo(250, 50)

  cxt.stroke()
</script>
復制代碼

畫這種折線，最好在草稿紙上畫一個坐標系，自己計算并描繪一下每個點大概在什么什么位置，最后在 canvas 中看看效果。

矩形

根據前面的基礎，我們可以 使用線段來描繪矩形，但 canvas 也提供了 rect() 等方法可以直接生成矩形。

使用線段描繪矩形

可以使用前面畫線段的方法來繪制矩形

16.png

canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
 const cnv=document.getElementById('c')
 const cxt=cnv.getContext('2d')

 // 繪制矩形
 cxt.moveTo(50, 50)
 cxt.lineTo(200, 50)
 cxt.lineTo(200, 120)
 cxt.lineTo(50, 120)
 cxt.lineTo(50, 50) // 需要閉合，又或者使用 closePath() 方法進行閉合，推薦使用 closePath()

 cxt.stroke()
</script>
復制代碼

上面的代碼幾個點分別對應下圖。

17.jpg

使用strokeRect()描邊矩形

strokeStyle：設置描邊的屬性（顏色、漸變、圖案）
strokeRect(x, y, width, height)：描邊矩形（x和y是矩形左上角起點；width 和 height 是矩形的寬高）
strokeStyle 必須寫在 strokeRect() 前面，不然樣式不生效。

18.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // strokeStyle 屬性
  // strokeRect(x, y, width, height) 方法
  cxt.strokeStyle='pink'
  cxt.strokeRect(50, 50, 200, 100)
</script>
復制代碼

上面的代碼可以這樣理解

19.jpg

使用fillRect()填充矩形

fillRect() 和 strokeRect() 方法差不多，但 fillRect() 的作用是填充。

需要注意的是，fillStyle 必須寫在 fillRect() 之前，不然樣式不生效。

20.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // fillStyle 屬性
  // fillRect(x, y, width, height) 方法
  cxt.fillStyle='pink'
  cxt.fillRect(50, 50, 200, 100) // fillRect(x, y, width, height)
</script>
復制代碼

同時使用strokeRect()和fillRect()

同時使用 strokeRect() 和 fillRect() 會產生描邊和填充的效果

21.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.strokeStyle='red'
  cxt.strokeRect(50, 50, 200, 100) // strokeRect(x, y, width, height)
  cxt.fillStyle='yellow'
  cxt.fillRect(50, 50, 200, 100) // fillRect(x, y, width, height)
</script>
復制代碼

使用rect()生成矩形

rect() 和 fillRect() 、strokeRect() 的用法差不多，唯一的區別是：

strokeRect() 和 fillRect() 這兩個方法調用后會立即繪制；rect() 方法被調用后，不會立刻繪制矩形，而是需要調用 stroke() 或 fill() 輔助渲染。

22.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.strokeStyle='red'
  cxt.fillStyle='pink'

  cxt.rect(50, 50, 200, 100) // rect(x, y, width, height)

  cxt.stroke()
  cxt.fill()
</script>
復制代碼

等價公式：

cxt.strokeStyle='red',
cxt.rect(50, 50, 200, 100)
cxt.stroke()

// 等價于
cxt.strokeStyle='red'
cxt.strokerect(50, 50, 200, 100)


// -----------------------------


cxt.fillStyle='hotpink'
cxt.rect(50, 50, 200, 100)
cxt.fill()

// 等價于
cxt.fillStyle='yellowgreen'
cxt.fillRect(50, 50, 200, 100)
復制代碼

使用clearRect()清空矩形

使用 clearRect() 方法可以清空指定區域。

clearRect(x, y, width, height)
復制代碼

其語法和創建 cxt.rect() 差不多。

23.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.fillStyle='pink' // 設置填充顏色
  cxt.fillRect(50, 50, 200, 200) // 填充矩形

  cxt.clearRect(60, 60, 180, 90) // 清空矩形
</script>
復制代碼

清空畫布

canvas 畫布元素是矩形，所以可以通過下面的代碼把整個畫布清空掉。

// 省略部分代碼

cxt.clearRect(0, 0, cnv.width, cnv.height)
復制代碼

要清空的區域：從畫布左上角開始，直到畫布的寬和畫布的高為止。

多邊形

Canvas 要畫多邊形，需要使用 moveTo() 、 lineTo() 和 closePath() 。

三角形

雖然三角形是常見圖形，但 canvas 并沒有提供類似 rect() 的方法來繪制三角形。

需要確定三角形3個點的坐標位置，然后使用 stroke() 或者 fill() 方法生成三角形。

24.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>

  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)
  cxt.lineTo(200, 200)

  // 注意點：如果使用 lineTo 閉合圖形，是不能很好閉合拐角位的。
  cxt.lineTo(50, 50) // 閉合

  cxt.stroke()

</script>
復制代碼

注意，默認情況下不會自動從最后一個點連接到起點。最后一步需要設置一下 cxt.lineTo(50, 50) ，讓它與 cxt.moveTo(50, 50) 一樣。這樣可以讓路徑回到起點，形成一個閉合效果。

但這樣做其實是有點問題的，而且也比較麻煩，要記住起始點坐標。

上面的閉合操作，如果遇到設置了 lineWidth 或者 lineJoin 就會有問題，比如：

25.png

// 省略部分代碼
cxt.lineWidth=20
復制代碼

當線段變粗后，起始點和結束點的鏈接處，拐角就出現“不正常”現象。

如果需要真正閉合，可以使用 closePath() 方法。

26.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)
  cxt.lineTo(200, 200)
  // 手動閉合
  cxt.closePath()

  cxt.lineJoin='miter' // 線條連接的樣式。miter: 默認; bevel: 斜面; round: 圓角
  cxt.lineWidth=20
  cxt.stroke()
</script>
復制代碼

使用 cxt.closePath() 可以自動將終點和起始點連接起來，此時看上去就正常多了。

菱形

有一組鄰邊相等的平行四邊形是菱形

27.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.moveTo(150, 50)
  cxt.lineTo(250, 100)
  cxt.lineTo(150, 150)
  cxt.lineTo(50, 100)
  cxt.closePath()
  cxt.stroke()
</script>
復制代碼

要繪制直線類型的圖形，在草稿紙上標記出起始點和每個拐角的點，然后再連線即可。相對曲線圖形來說，直線圖形是比較容易的。

圓形

繪制圓形的方法是 arc()。

語法：

arc(x, y, r, sAngle, eAngle，counterclockwise)
復制代碼

x 和 y: 圓心坐標
r: 半徑
sAngle: 開始角度
eAngle: 結束角度
counterclockwise: 繪制方向（true: 逆時針; false: 順時針），默認 false

28.jpg

開始角度和結束角度，都是以弧度為單位。例如 180°就寫成 Math.PI ，360°寫成 Math.PI * 2 ，以此類推。

在實際開發中，為了讓自己或者別的開發者更容易看懂弧度的數值，1°應該寫成 Math.PI / 180。

100°: 100 * Math.PI / 180
110°: 110 * Math.PI / 180
241°: 241 * Math.PI / 180

注意：繪制圓形之前，必須先調用 beginPath() 方法！！！在繪制完成之后，還需要調用 closePath() 方法！！！

29.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.beginPath()
  cxt.arc(150, 150, 80, 0, 360 * Math.PI / 180)
  cxt.closePath()

  cxt.stroke()
</script>
復制代碼

半圓

如果使用 arc() 方法畫圓時，沒做到剛好繞完一周（360°）就直接閉合路徑，就會出現半圓的狀態。

30.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180) // 順時針
  cxt.closePath()

  cxt.stroke()
</script>
復制代碼

上面的代碼中，cxt.arc 最后一個參數沒傳，默認是 false ，所以是順時針繪制。

31.jpg

如果希望半圓的弧面在上方，可以將 cxt.arc 最后一個參數設置成 true

32.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 180 * Math.PI / 180, true)
  cxt.closePath()

  cxt.stroke()
</script>
復制代碼

弧線

使用 arc() 方法畫半圓時，如果最后不調用 closePath() 方法，就不會出現閉合路徑。也就是說，那是一條弧線。

在 canvas 中，畫弧線有2中方法：arc() 和 arcTo() 。

arc() 畫弧線

如果想畫一條 0° ~ 30° 的弧線，可以這樣寫

33.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.beginPath()
  cxt.arc(150, 150, 100, 0, 30 * Math.PI / 180)

  cxt.stroke()
</script>
復制代碼

原理如下圖所示，紅線代表畫出來的那條弧線。

34.jpg

arcTo() 畫弧線

arcTo() 的使用方法會更加復雜，如果初學看不太懂的話可以先跳過，看完后面的再回來補補。

語法：

arcTo(cx, cy, x2, y2, radius)
復制代碼

cx: 兩切線交點的橫坐標
cy: 兩切線交點的縱坐標
x2: 結束點的橫坐標
y2: 結束點的縱坐標
radius: 半徑

其中，(cx, cy) 也叫控制點，(x2, y2) 也叫結束點。

是不是有點奇怪，為什么沒有 x1 和 y1 ？

(x1, y1) 是開始點，通常是由 moveTo() 或者 lineTo() 提供。

arcTo() 方法利用 開始點、控制點和結束點形成的家教，繪制一段與家教的兩邊相切并且半徑為 radius 的圓弧。

35.jpg

舉個例子

36.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.moveTo(40, 40)
  cxt.arcTo(120, 40, 120, 80, 80)

  cxt.stroke()
</script>
復制代碼

基礎樣式

前面學完基礎圖形，接下來可以開始了解一下如何設置元素的基礎樣式。

描邊 stroke()

前面的案例中，其實已經知道使用 stroke() 方法進行描邊了。這里就不再多講這個方法。

線條寬度 lineWidth

lineWidth 默認值是 1 ，默認單位是 px。

語法：

lineWidth=線寬
復制代碼

37.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 線寬 10
  cxt.beginPath()
  cxt.moveTo(50, 50)
  cxt.lineTo(250, 50)
  cxt.lineWidth=10 // 設置線寬
  cxt.stroke()

  // 線寬 20
  cxt.beginPath()
  cxt.moveTo(50, 150)
  cxt.lineTo(250, 150)
  cxt.lineWidth=20 // 設置線寬
  cxt.stroke()

  // 線寬 30
  cxt.beginPath()
  cxt.moveTo(50, 250)
  cxt.lineTo(250, 250)
  cxt.lineWidth=30 // 設置線寬
  cxt.stroke()
</script>
復制代碼

線條顏色 strokeStyle

使用 strokeStyle 可以設置線條顏色

語法:

strokeStyle=顏色值
復制代碼

38.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.moveTo(50, 50)
  cxt.lineTo(250, 50)
  cxt.lineWidth=20
  cxt.strokeStyle='pink' // 設置顏色
  cxt.stroke()
</script>
復制代碼

為了展示方便，我將 lineWidth 設為 20。

線帽 lineCap

線帽指的是線段的開始和結尾處的樣式，使用 lineCap 可以設置

語法：

lineCap='屬性值'
復制代碼

屬性值包括：

butt: 默認值，無線帽
square: 方形線帽
round: 圓形線帽

39.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 設置線寬，方便演示
  cxt.lineWidth=16

  // 默認線帽 butt
  cxt.beginPath()
  cxt.moveTo(50, 60)
  cxt.lineTo(250, 60)
  cxt.stroke()


  // 方形線帽 square
  cxt.beginPath()
  cxt.lineCap='square'
  cxt.moveTo(50, 150)
  cxt.lineTo(250, 150)
  cxt.stroke()


  // 圓形線帽 round
  cxt.beginPath()
  cxt.lineCap='round'
  cxt.moveTo(50, 250)
  cxt.lineTo(250, 250)
  cxt.stroke()
</script>
復制代碼

使用 square 和 round 的話，會使線條變得稍微長一點點，這是給線條增加線帽的部分，這個長度在日常開發中需要注意。

線帽只對線條的開始和結尾處產生作用，對拐角不會產生任何作用。

拐角樣式 lineJoin

如果需要設置拐角樣式，可以使用 lineJoin 。

語法：

lineJoin='屬性值'
復制代碼

屬性值包括：

miter: 默認值，尖角
round: 圓角
bevel: 斜角

40.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')
  
  cxt.lineWidth=20

  // 默認，尖角
  cxt.moveTo(50, 40)
  cxt.lineTo(200, 40)
  cxt.lineTo(200, 90)
  cxt.stroke()

  // 斜角 bevel
  cxt.beginPath()
  cxt.moveTo(50, 140)
  cxt.lineTo(200, 140)
  cxt.lineTo(200, 190)
  cxt.lineJoin='bevel'
  cxt.stroke()

  // 圓角 round
  cxt.beginPath()
  cxt.moveTo(50, 240)
  cxt.lineTo(200, 240)
  cxt.lineTo(200, 290)
  cxt.lineJoin='round'
  cxt.stroke()
</script>
復制代碼

虛線 setLineDash()

使用 setLineDash() 方法可以將描邊設置成虛線。

語法：

setLineDash([])
復制代碼

需要傳入一個數組，且元素是數值型。

虛線分3種情況

只傳1個值
有2個值
有3個以上的值

41.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.lineWidth=20
  cxt.strokeStyle='pink'

  cxt.moveTo(50, 50)
  cxt.lineTo(200, 50)
  cxt.setLineDash([10]) // 只傳1個參數，實線與空白都是 10px
  cxt.stroke()


  cxt.beginPath()
  cxt.moveTo(50, 100)
  cxt.lineTo(200, 100)
  cxt.setLineDash([10, 20]) // 2個參數，此時，實線是 10px, 空白 20px
  cxt.stroke()


  cxt.beginPath()
  cxt.moveTo(50, 150)
  cxt.lineTo(200, 150)
  cxt.setLineDash([10, 20, 5]) // 傳3個以上的參數，此例：10px實線，20px空白，5px實線，10px空白，20px實線，5px空白 ……

  cxt.stroke()
</script>
復制代碼

此外，還可以始終 cxt.getLineDash() 獲取虛線不重復的距離；

用 cxt.lineDashOffset 設置虛線的偏移位。

填充

使用 fill() 可以填充圖形，根據前面的例子應該掌握了如何使用 fill()

42.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.fillStyle='pink'

  cxt.rect(50, 50, 200, 100)

  cxt.fill()
</script>
復制代碼

可以使用 fillStyle 設置填充顏色，默認是黑色。

非零環繞填充

在使用 fill() 方法填充時，需要注意一個規則：非零環繞填充。

在使用 moveTo 和 lineTo 描述圖形時，如果是按順時針繪制，計數器會加1；如果是逆時針，計數器會減1。

當圖形所處的位置，計數器的結果為0時，它就不會被填充。

這樣說有點復雜，先看看例子

43.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 外層矩形
  cxt.moveTo(50, 50)
  cxt.lineTo(250, 50)
  cxt.lineTo(250, 250)
  cxt.lineTo(50, 250)
  cxt.closePath()

  // 內層矩形
  cxt.moveTo(200, 100)
  cxt.lineTo(100, 100)
  cxt.lineTo(100, 200)
  cxt.lineTo(200, 200)
  cxt.closePath()
  cxt.fill()
</script>
復制代碼

請看看上面的代碼，我畫了2個矩形，它們都沒有用 beginPath() 方法開辟新路徑。

44.png

內層矩形是逆時針繪制的，所以內層的值是 -1 ，它又經過外層矩形，而外層矩形是順時針繪制，所以經過外層時值 +1，最終內層的值為 0 ，所以不會被填充。

文本

Canvas 提供了一些操作文本的方法。

為了方便演示，我們先了解一下在 Canvas 中如何給本文設置樣式。

樣式 font

和 CSS 設置 font 差不多，Canvas 也可以通過 font 設置樣式。

語法：

cxt.font='font-style font-variant font-weight font-size/line-height font-family'
復制代碼

如果需要設置字號 font-size，需要同事設置 font-family。

cxt.font='30px 宋體'
復制代碼

描邊 strokeText()

使用 strokeText() 方法進行文本描邊

語法：

strokeText(text, x, y, maxWidth)
復制代碼

text: 字符串，要繪制的內容
x: 橫坐標，文本左邊要對齊的坐標（默認左對齊）
y: 縱坐標，文本底邊要對齊的坐標
maxWidth: 可選參數，表示文本渲染的最大寬度（px），如果文本超出 maxWidth 設置的值，文本會被壓縮。

45.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.font='60px Arial' // 將字號設置成 60px，方便觀察
  cxt.strokeText('雷猴', 30, 90)
</script>
復制代碼

設置描邊顏色 strokeStyle

使用 strokeStyle 設置描邊顏色。

46.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.font='60px Arial' // 將字號設置成 60px，方便觀察
  cxt.strokeStyle='pink' // 設置文本描邊顏色
  cxt.strokeText('雷猴', 30, 90)
</script>
復制代碼

填充 fillText

使用 fillText() 可填充文本。

語法和 strokeText() 一樣。

fillText(text, x, y, maxWidth)
復制代碼

47.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.font='60px Arial'
  cxt.fillText('雷猴', 30, 90)
</script>
復制代碼

設置填充顏色 fillStyle

使用 fillStyle 可以設置文本填充顏色。

48.png

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  cxt.font='60px Arial'
  cxt.fillStyle='pink'
  cxt.fillText('雷猴', 30, 90)
</script>
復制代碼

獲取文本長度 measureText()

measureText().width 方法可以獲取文本的長度，單位是 px 。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  let text='雷猴'
  cxt.font='bold 40px Arial'
  cxt.fillText(text, 40, 80)

  console.log(cxt.measureText(text).width) // 80
</script>
復制代碼

水平對齊方式 textAlign

使用 textAlign 屬性可以設置文字的水平對齊方式，一共有5個值可選

start: 默認。在指定位置的橫坐標開始。
end: 在指定坐標的橫坐標結束。
left: 左對齊。
right: 右對齊。
center: 居中對齊。

49.png

紅線是輔助參考線。

<canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 豎向的輔助線（參考線，在畫布中間）
  cxt.moveTo(200, 0)
  cxt.lineTo(200, 400)
  cxt.strokeStyle='red'
  cxt.stroke()

  cxt.font='30px Arial'

  // 橫坐標開始位對齊
  cxt.textAlign='start' // 默認值,
  cxt.fillText('雷猴 start', 200, 40)

  // 橫坐標結束位對齊
  cxt.textAlign='end' // 結束對齊
  cxt.fillText('雷猴 end', 200, 100)

  // 左對齊
  cxt.textAlign='left' // 左對齊
  cxt.fillText('雷猴 left', 200, 160)

  // 右對齊
  cxt.textAlign='right' // 右對齊
  cxt.fillText('雷猴 right', 200, 220)

  // 居中對齊
  cxt.textAlign='center' // 右對齊
  cxt.fillText('雷猴 center', 200, 280)
</script>
復制代碼

從上面的例子看，start 和 left 的效果好像是一樣的，end 和 right 也好像是一樣的。

在大多數情況下，它們的確一樣。但在某些國家或者某些場合，閱讀文字的習慣是 從右往左 時，start 就和 right 一樣了，end 和 left 也一樣。這是需要注意的地方。

垂直對齊方式 textBaseline

使用 textBaseline 屬性可以設置文字的垂直對齊方式。

在使用 textBaseline 前，需要自行了解 css 的文本基線。

50.png

用一張網圖解釋一下基線

textBaseline 可選屬性：

alphabetic: 默認。文本基線是普通的字母基線。
top: 文本基線是 em 方框的頂端。
bottom: 文本基線是 em 方框的底端。
middle: 文本基線是 em 方框的正中。
hanging: 文本基線是懸掛基線。

51.png

紅線是輔助參考線。

<canvas id="c" width="800" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 橫向的輔助線（參考線，在畫布中間）
  cxt.moveTo(0, 150)
  cxt.lineTo(800, 150)
  cxt.strokeStyle='red'
  cxt.stroke()

  cxt.font='20px Arial'

  // 默認 alphabetic
  cxt.textBaseline='alphabetic'
  cxt.fillText('雷猴 alphabetic', 10, 150)

  // 默認 top
  cxt.textBaseline='top'
  cxt.fillText('雷猴 top', 200, 150)

  // 默認 bottom
  cxt.textBaseline='bottom'
  cxt.fillText('雷猴 bottom', 320, 150)

  // 默認 middle
  cxt.textBaseline='middle'
  cxt.fillText('雷猴 middle', 480, 150)

  // 默認 hanging
  cxt.textBaseline='hanging'
  cxt.fillText('雷猴 hanging', 640, 150)
</script>
復制代碼

注意：在繪制文字的時候，默認是以文字的左下角作為參考點進行繪制

圖片

在 Canvas 中可以使用 drawImage() 方法繪制圖片。

渲染圖片

渲染圖片的方式有2中，一種是在JS里加載圖片再渲染，另一種是把DOM里的圖片拿到 canvas 里渲染。

渲染的語法：

drawImage(image, dx, dy)
復制代碼

image: 要渲染的圖片對象。
dx: 圖片左上角的橫坐標位置。
dy: 圖片左上角的縱坐標位置。

JS版

在 JS 里加載圖片并渲染，有以下幾個步驟：

創建 Image 對象
引入圖片
等待圖片加載完成
使用 drawImage() 方法渲染圖片

52.png

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  // 1 創建 Image 對象
  const image=new Image()

  // 2 引入圖片
  image.src='./images/dog.jpg'

  // 3 等待圖片加載完成
  image.onload=()=> {
    // 4 使用 drawImage() 方法渲染圖片
    cxt.drawImage(image, 30, 30)
  }
</script>
復制代碼

DOM版

53.png

<style>
  #dogImg {
    display: none;
  }
</style>

<img src="./images/dog.jpg" id="dogImg"/>
<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  const image=document.getElementById('dogImg')

  cxt.drawImage(image, 70, 70)
</script>
復制代碼

因為圖片是從 DOM 里獲取到的，所以一般來說，只要在 window.onload 這個生命周期內使用 drawImage 都可以正常渲染圖片。

本例使用了 css 的方式，把圖片的 display 設置成 none 。因為我不想被 <img> 影響到本例講解。

實際開發過程中按照實際情況設置即可。

設置圖片寬高

前面的例子都是直接加載圖片，圖片默認的寬高是多少就加載多少。

如果需要指定圖片寬高，可以在前面的基礎上再添加兩個參數：

drawImage(image, dx, dy, dw, dh)
復制代碼

image、 dx、 dy 的用法和前面一樣。

dw 用來定義圖片的寬度，dy 定義圖片的高度。

54.png

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  const image=new Image()
  image.src='./images/dog.jpg'

  image.onload=()=> {
    cxt.drawImage(image, 30, 30, 100, 100)
  }
</script>
復制代碼

我把圖片的尺寸設為 100px * 100px，圖片看上去比之前就小了很多。

截取圖片

截圖圖片同樣使用drawImage() 方法，只不過傳入的參數數量比之前都多，而且順序也有點不一樣了。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
復制代碼

以上參數缺一不可

image: 圖片對象
sx: 開始截取的橫坐標
sy: 開始截取的縱坐標
sw: 截取的寬度
sh: 截取的高度
dx: 圖片左上角的橫坐標位置
dy: 圖片左上角的縱坐標位置
dw: 圖片寬度
dh: 圖片高度

55.png

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv=document.getElementById('c')
  const cxt=cnv.getContext('2d')

  const image=new Image()
  image.src='./images/dog.jpg'

  image.onload=()=> {
    cxt.drawImage(image, 0, 0, 100, 100, 30, 30, 200, 200)
  }
</script>
復制代碼

總結

本文主要講解了在 Canvas 中繪制一些基礎圖形，還有一些基礎樣式設置。

還有更多高級的玩法會在之后的文章中講到，比如漸變、投影、濾鏡等等。

德育處主任，https://juejin.cn/post/7116784455561248775

在線咨詢

上一篇：用純javascript實現斗魚直播彈幕效果，代碼也
下一篇：學會使用HTML5 和 JavaScript優化表單

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5 Canvas的事件處理（無需循環重繪和事

揭示概念

入門

是時候創造泡泡了！

用圓弧法畫圓

使用 requestAnimationFrame 方法移動圓圈

創建粒子：引入粒子類

總結

文簡介

Canvas 是什么？

Canvas 和 SVG 的區別

起步

畫條直線

注意點

1、默認寬高

2、設置 canvas 寬高

3、不能通過 CSS 設置畫布的寬高

4、線條默認寬度和顏色

5、IE兼容性高

基礎圖形

坐標系

直線

一條直線

多條直線

設置樣式

新開路徑

只使用beginPath()

設置新線段的樣式，沒使用beginPath()的情況

正確的做法

折線

矩形

使用線段描繪矩形

使用strokeRect()描邊矩形

使用fillRect()填充矩形

同時使用strokeRect()和fillRect()

使用rect()生成矩形

使用clearRect()清空矩形

清空畫布

多邊形

三角形

菱形

圓形

半圓

弧線

arc() 畫弧線

arcTo() 畫弧線

基礎樣式

描邊 stroke()

線條寬度 lineWidth

線條顏色 strokeStyle

線帽 lineCap

拐角樣式 lineJoin

虛線 setLineDash()

填充

非零環繞填充

文本

樣式 font

描邊 strokeText()

設置描邊顏色 strokeStyle

填充 fillText

設置填充顏色 fillStyle

獲取文本長度 measureText()

水平對齊方式 textAlign

垂直對齊方式 textBaseline

圖片

渲染圖片

JS版

DOM版

設置圖片寬高

截取圖片

總結

您的項目需求