水車_ ·初識 canvas
1. 前言
本節(jié)課我們將正式開始學(xué)習(xí) canvas，除了一些過時的瀏覽器不支持 canvas 標(biāo)簽外，所有的新版本主流瀏覽器都支持它，所以你可以找個相對較新的瀏覽器開始你的學(xué)習(xí)。
2. canvas 介紹
canvas 中主要分兩部分內(nèi)容，分別是 <canvas> 標(biāo)簽和 canvas API。
2.1 <canvas> 標(biāo)簽
<canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像。
<canvas> 標(biāo)簽只是圖形容器，你必須使用腳本來繪制圖形。
<canvas> 標(biāo)簽是 HTML 5 中的新標(biāo)簽，它有兩個屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| width | pixels | 設(shè)置 canvas 畫布的寬度。 |
| height | pixels | 設(shè)置 canvas 畫布的高度。 |
說明：canvas 標(biāo)簽和其他 HTML 標(biāo)簽一樣，支持 HTML 全局屬性和 HTML 中的事件屬性。
標(biāo)簽示例
我們先看一個示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc"></canvas>
</body>
</html>
運行結(jié)果：
示例中，我們創(chuàng)建了一個 canvas 畫布，最開始這個畫布是空白的，我們看到的灰色邊框是用 css 設(shè)定上去的，這里我們只需要知道怎么創(chuàng)建畫布就可以了。
2.2 canvas 兼容方案
由于 canvas 屬于較新的技術(shù)，有些舊版本的瀏覽器是不支持的，所以我們在開發(fā)時就需要考慮到它們的使用場景。
<canvas> 容器中可以包含任何 HTML 代碼，包含的 HTML 代碼即為備選方案。
如果當(dāng)前瀏覽器不支持 <canvas> 標(biāo)簽（尤其是IE9之前的IE瀏覽器），則可以使用備選兼容方案，如果當(dāng)前瀏覽器支持 <canvas> 標(biāo)簽，則使用 canvas。
兼容示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:1px solid #f2180d;">
<!-- 這里是備選方案 -->
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。
如果支持HTML5 canvas 標(biāo)簽，則不會看到這些內(nèi)容
<img src="images/imooc.png" width="150" height="150" alt=""/>
</canvas>
</body>
</html>
運行結(jié)果：
上面的案例中，如果在支持 canvas 的瀏覽器中就不會看到 <canvas> 標(biāo)簽包含的內(nèi)容，如果在不支持 canvas 的瀏覽器中則會顯示提示文字。
2.3 canvas API 接口
前面我們說到 <canvas> 就是一個展示圖像的容器，只是創(chuàng)建了一個固定大小的畫布，但是它是沒有自己的行為的，不過它定義了 JavaScript 的 API，我們可以使用 JavaScript 來繪制圖形，<canvas> 支持腳本化客戶端繪圖操作。
繪制 canvas 通用步驟示例
這個簡單的例子是在畫布繪制一個綠色的長方形。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc"></canvas>
<script>
// 根據(jù)id屬性獲取到canvas標(biāo)簽
const canvas = document.getElementById('imooc');
// 獲取到canvas的 渲染上下文, 渲染上下文的概念后面有講到
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
運行結(jié)果：
我們將上面的例子拆分講解：
-
創(chuàng)建一個畫布。
<canvas id="imooc"></canvas> -
通過 JavaScript 獲取到畫布。
const canvas = document.getElementById('imooc'); -
獲取到畫布的渲染上下文。
const ctx = canvas.getContext('2d'); -
開始繪圖。
ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100);
這個案例為我們展示了一個 canvas 繪制的最基本流程，這里需要著重介紹一下渲染上下文。
2.3.1 “渲染上下文”的概念
開始繪制畫布時我們還需要明白一個概念，就是渲染上下文。
canvas 起初是空白的，開始繪制內(nèi)容前，首先需要通過 API 找到“渲染上下文”這個對象，然后在它的上面繪制。拿上面繪制綠色長方形的示例來說，我們首先通過 getContext('2d') 方法拿到 <canvas> 的渲染上下文，這個方法是用來獲得渲染上下文和畫布的繪制功能。getContext() 只有一個參數(shù)即上下文的格式，本教程只針對 2D 圖像。 上面案例中，我們定義的變量 ctx 存儲的就是當(dāng)前 canvas 的渲染上下文。
3. 畫布坐標(biāo)
canvas 的畫布坐標(biāo)默認(rèn)和我們?yōu)g覽器窗口坐標(biāo)系是相同的，都是以左上角為坐標(biāo)原點，沿 X 軸向右為正值，沿 Y 軸向下為正值，這和我們數(shù)學(xué)上定義的坐標(biāo)系有一些差別。
canvas 默認(rèn)坐標(biāo)系如下圖：
4. 總結(jié)
本小節(jié)主要講解了 <canvas> 畫布的創(chuàng)建以及如何用 JavaScript 操作畫布去繪制一個簡單圖形。后面教程中提供的例子，會讓你明白 canvas 可以做什么。
2025 imooc.com All Rights Reserved |