一、canvas 簡介 <canvas>
是 HTML5
新增的,一個(gè)可以使用腳本(通常為 Javascript
) 在其中繪制圖像的 HTML
元素。它可以用來制作照片集或者制作簡單(也不是那么簡單)的動(dòng)畫,甚至可以進(jìn)行實(shí)時(shí)視頻處理和渲染。
它最初由蘋果內(nèi)部使用自己 MacOS X WebKit
推出,供應(yīng)用程序使用像儀表盤的構(gòu)件和 Safari
瀏覽器使用。后來,有人通過 Gecko
內(nèi)核的瀏覽器 (尤其是 Mozilla
和Firefox
),Opera
和 Chrome
和超文本網(wǎng)絡(luò)應(yīng)用技術(shù)工作組建議為下一代的網(wǎng)絡(luò)技術(shù)使用該元素。
Canvas
是由 HTML
代碼配合高度和寬度屬性而定義出的可繪制區(qū)域。Javascript
代碼可以訪問該區(qū)域,類似于其他通用的二維 API
,通過一套完整的繪圖函數(shù)來動(dòng)態(tài)生成圖形。
Mozilla 程序從 Gecko 1.8 (Firefox 1.5) 開始支持 <canvas>
, Internet Explorer 從 IE9 開始 <canvas>
。Chrome 和 Opera 9+ 也支持 <canvas>
。
二、Canvas基本使用 <canvas id="tutorial" width="300" height="300"></canvas> 2.1 <canvas>
元素 <canvas>
看起來和 <img>
標(biāo)簽一樣,只是 <canvas>
只有兩個(gè)可選的屬性 width、heigth
屬性,而沒有 src、alt
屬性。
如果不給 <canvas>
設(shè)置 widht、height
屬性時(shí),則默認(rèn) width
為300、height
為 150,單位都是 px
。也可以使用 css
屬性來設(shè)置寬高,但是如寬高屬性和初始比例不一致,他會(huì)出現(xiàn)扭曲。所以,建議永遠(yuǎn)不要使用 css
屬性來設(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ì)顯示出來。
2.2 渲染上下文(Thre Rending Context) <canvas>
會(huì)創(chuàng)建一個(gè)固定大小的畫布,會(huì)公開一個(gè)或多個(gè)渲染上下文 (畫筆),使用渲染上下文 來繪制和處理要展示的內(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 檢測支持性 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");
//開始代碼
}
draw();
</script>
</html> 2.5 一個(gè)簡單的例子 以下實(shí)例繪制兩個(gè)長方形:
實(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)格所覆蓋。通常來說網(wǎng)格中的一個(gè)單元相當(dāng)于 canvas
元素中的一像素。柵格的起點(diǎn)為左上角,坐標(biāo)為 (0,0) 。所有元素的位置都相對(duì)于原點(diǎn)來定位。所以圖中藍(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