第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

水車_ · 更新于 2021-08-02

初識 canvas

1. 前言

本節(jié)課我們將正式開始學習 canvas，除了一些過時的瀏覽器不支持 canvas 標簽外，所有的新版本主流瀏覽器都支持它，所以你可以找個相對較新的瀏覽器開始你的學習。

2. canvas 介紹

canvas 中主要分兩部分內(nèi)容，分別是 <canvas> 標簽和 canvas API。

2.1 <canvas> 標簽

<canvas> 標簽定義圖形，比如圖表和其他圖像。
<canvas> 標簽只是圖形容器，你必須使用腳本來繪制圖形。

<canvas> 標簽是 HTML 5 中的新標簽，它有兩個屬性：

屬性 值 說明
width pixels 設置 canvas 畫布的寬度。
height pixels 設置 canvas 畫布的高度。

說明：canvas 標簽和其他 HTML 標簽一樣，支持 HTML 全局屬性和 HTML 中的事件屬性。

標簽示例

我們先看一個示例：

實例演示
預覽 復制
復制成功！
<!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 設定上去的，這里我們只需要知道怎么創(chuàng)建畫布就可以了。

2.2 canvas 兼容方案

由于 canvas 屬于較新的技術，有些舊版本的瀏覽器是不支持的，所以我們在開發(fā)時就需要考慮到它們的使用場景。

<canvas> 容器中可以包含任何 HTML 代碼，包含的 HTML 代碼即為備選方案。

如果當前瀏覽器不支持 <canvas> 標簽（尤其是IE9之前的IE瀏覽器），則可以使用備選兼容方案，如果當前瀏覽器支持 <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" width="350" height="200" style="border:1px solid #f2180d;">
		<!-- 這里是備選方案 -->
		您的瀏覽器不支持 HTML5 canvas 標簽。
		如果支持HTML5 canvas 標簽，則不會看到這些內(nèi)容
		<img src="images/imooc.png" width="150" height="150" alt=""/>
	</canvas>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

上面的案例中，如果在支持 canvas 的瀏覽器中就不會看到 <canvas> 標簽包含的內(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標簽
		const canvas = document.getElementById('imooc');
		
		// 獲取到canvas的 渲染上下文, 渲染上下文的概念后面有講到
		const ctx = canvas.getContext('2d');
		
		ctx.fillStyle = 'green';
		ctx.fillRect(10, 10, 150, 100);
	</script>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

我們將上面的例子拆分講解：

  1. 創(chuàng)建一個畫布。

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

  2. 通過 JavaScript 獲取到畫布。

    const canvas = document.getElementById('imooc');

  3. 獲取到畫布的渲染上下文。

    const ctx = canvas.getContext('2d');

  4. 開始繪圖。

    ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

這個案例為我們展示了一個 canvas 繪制的最基本流程，這里需要著重介紹一下渲染上下文。

2.3.1 “渲染上下文”的概念

開始繪制畫布時我們還需要明白一個概念，就是渲染上下文。

canvas 起初是空白的，開始繪制內(nèi)容前，首先需要通過 API 找到“渲染上下文”這個對象，然后在它的上面繪制。拿上面繪制綠色長方形的示例來說，我們首先通過 getContext('2d') 方法拿到 <canvas> 的渲染上下文，這個方法是用來獲得渲染上下文和畫布的繪制功能。getContext() 只有一個參數(shù)即上下文的格式，本教程只針對 2D 圖像。 上面案例中，我們定義的變量 ctx 存儲的就是當前 canvas 的渲染上下文。

3. 畫布坐標

canvas 的畫布坐標默認和我們?yōu)g覽器窗口坐標系是相同的，都是以左上角為坐標原點，沿 X 軸向右為正值，沿 Y 軸向下為正值，這和我們數(shù)學上定義的坐標系有一些差別。

canvas 默認坐標系如下圖：

4. 總結(jié)

本小節(jié)主要講解了 <canvas> 畫布的創(chuàng)建以及如何用 JavaScript 操作畫布去繪制一個簡單圖形。后面教程中提供的例子，會讓你明白 canvas 可以做什么。