一、canvas 簡(jiǎn)介 <canvas> 是 HTML5 新增的，一個(gè)可以使用腳本(通常為 Javascript) 在其中繪制圖像的 HTML 元素。它可以用來(lái)制作照片集或者制作簡(jiǎn)單(也不是那么簡(jiǎn)單)的動(dòng)畫(huà)，甚至可以進(jìn)行實(shí)時(shí)視頻處理和渲染。
它最初由蘋(píng)果內(nèi)部使用自己 MacOS X WebKit 推出，供應(yīng)用程序使用像儀表盤(pán)的構(gòu)件和 Safari 瀏覽器使用。后來(lái)，有人通過(guò) Gecko 內(nèi)核的瀏覽器 (尤其是 Mozilla和Firefox)，Opera 和 Chrome 和超文本網(wǎng)絡(luò)應(yīng)用技術(shù)工作組建議為下一代的網(wǎng)絡(luò)技術(shù)使用該元素。
Canvas 是由 HTML 代碼配合高度和寬度屬性而定義出的可繪制區(qū)域。Javascript 代碼可以訪問(wèn)該區(qū)域，類似于其他通用的二維 API，通過(guò)一套完整的繪圖函數(shù)來(lái)動(dòng)態(tài)生成圖形。
Mozilla 程序從 Gecko 1.8 (Firefox 1.5) 開(kāi)始支持 <canvas>, Internet Explorer 從 IE9 開(kāi)始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>。
二、Canvas基本使用 <canvas id="tutorial" width="300" height="300"></canvas> 2.1 <canvas> 元素 <canvas> 看起來(lái)和 <img> 標(biāo)簽一樣，只是 <canvas> 只有兩個(gè)可選的屬性 width、heigth 屬性，而沒(méi)有 src、alt 屬性。
如果不給 <canvas> 設(shè)置 widht、height 屬性時(shí)，則默認(rèn) width為300、height 為 150，單位都是 px。也可以使用 css 屬性來(lái)設(shè)置寬高，但是如寬高屬性和初始比例不一致，他會(huì)出現(xiàn)扭曲。所以，建議永遠(yuǎn)不要使用 css 屬性來(lái)設(shè)置 <canvas> 的寬高。
替換內(nèi)容
由于某些較老的瀏覽器（尤其是 IE9 之前的 IE 瀏覽器）或者瀏覽器不支持 HTML 元素 <canvas>，在這些瀏覽器上你應(yīng)該總是能展示替代內(nèi)容。
支持 <canvas> 的瀏覽器會(huì)只渲染 <canvas> 標(biāo)簽，而忽略其中的替代內(nèi)容。不支持 <canvas> 的瀏覽器則 會(huì)直接渲染替代內(nèi)容。
用文本替換：
<canvas>
你的瀏覽器不支持 canvas，請(qǐng)升級(jí)你的瀏覽器。
</canvas> 用 <img> 替換：
<canvas>
<img decoding="async" src="./美女.jpg" alt="">
</canvas> 結(jié)束標(biāo)簽 </canvas> 不可省略。
與 <img> 元素不同，<canvas> 元素需要結(jié)束標(biāo)簽(</canvas>)。如果結(jié)束標(biāo)簽不存在，則文檔的其余部分會(huì)被認(rèn)為是替代內(nèi)容，將不會(huì)顯示出來(lái)。
2.2 渲染上下文(Thre Rending Context) <canvas> 會(huì)創(chuàng)建一個(gè)固定大小的畫(huà)布，會(huì)公開(kāi)一個(gè)或多個(gè)渲染上下文 (畫(huà)筆)，使用渲染上下文 來(lái)繪制和處理要展示的內(nèi)容。
我們重點(diǎn)研究 2D 渲染上下文。 其他的上下文我們暫不研究，比如， WebGL 使用了基于 OpenGL ES的3D 上下文 ("experimental-webgl") 。
var canvas = document.getElementById('tutorial');
//獲得 2d 上下文對(duì)象
var ctx = canvas.getContext('2d'); 2.3 檢測(cè)支持性 var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
} 2.4 代碼模板 <html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
//開(kāi)始代碼
}
draw();
</script>
</html> 2.5 一個(gè)簡(jiǎn)單的例子 以下實(shí)例繪制兩個(gè)長(zhǎng)方形：
實(shí)例
<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
//繪制矩形
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</html> 三、繪制形狀 3.1 柵格 (grid) 和坐標(biāo)空間 如下圖所示，canvas 元素默認(rèn)被網(wǎng)格所覆蓋。通常來(lái)說(shuō)網(wǎng)格中的一個(gè)單元相當(dāng)于 canvas 元素中的一像素。柵格的起點(diǎn)為左上角，坐標(biāo)為 (0,0) 。所有元素的位置都相對(duì)于原點(diǎn)來(lái)定位。所以圖中藍(lán)色方形左上角的坐標(biāo)為距離左邊（X 軸）x 像素，距離上邊（Y 軸）y 像素，坐標(biāo)為 (x,y)。
后面我們會(huì)涉及到坐標(biāo)原點(diǎn)的平移、網(wǎng)格的旋轉(zhuǎn)以及縮放等。
Copyright 2010-2025
ClickSun All Rights Reserved
：學(xué)習(xí) HTML5 Canvas 這一篇文章就夠了
400 186 1886
