Canvas
Canvas是HTML5新增的組件故黑，它就是一塊畫布，可以用JavaScript在上畫繪制各種圖標(biāo)、動畫等碍遍。
Web頁面增加畫布
Canvas元素是一個標(biāo)準(zhǔn)的HTML5元素，可以直接在HTML5頁面中添加<canvas>標(biāo)簽阳液，如
<!DOCTYPE HTML>
<html>
<head>
<title>Look what I Drew</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="draw" width="600" height="200"></canvas>
</body>
</html>
width屬性定義它在web頁面中水平方向所占的像素怕敬，height定義了它在web頁面中垂直方向所占的像素。
注意：上面的web頁面無法顯示畫布的帘皿，除非你在畫布上繪制了內(nèi)容东跪。
顯示畫布
現(xiàn)在找到一個證據(jù)，證明畫布在我們的頁面中確實存在鹰溜。我們可以通過位canvas指定CSS樣式虽填，下面來增加一個簡單的樣式，為畫布增加一個1像素寬的黑色邊框曹动。
<!DOCTYPE HTML>
<html>
<head>
<title>Look what I Drew</title>
<meta charset="utf-8">
<!--指定樣式-->
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="draw" width="600" height="200"></canvas>
</body>
</html>
效果:
- 一個頁面可以有多個畫布斋日，但是要為每個Canvas指定唯一的id
- 默認(rèn)情況下，畫布是透明的
在畫布上繪圖
接下來我們開始在畫布上繪制一個矩形墓陈。要畫這個矩形恶守，首先要確定矩形的位置，其次是矩形的大小贡必。這里把矩形畫在x=10像素兔港、y=10像素的位置，讓它的高度和寬度都等于100像素仔拟。
- 1.首先獲得Canvas元素的引用
- 2.獲取畫布的一個“2d"上下文
- 3.使用這個上下文萊繪制圖像
<!DOCTYPE HTML>
<html>
<head>
<title>Look what I Drew</title>
<meta charset="utf-8">
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload = function () {
//在畫布上畫個矩形
var canvas = document.getElementById('draw');
var context = canvas.getContext("2d");
context.fillRect(10,10,100,100);
};
</script>
</head>
<body>
<canvas id="draw" width="600" height="200"></canvas>
</body>
</html>
失敗處理
因為Canvas是HTML5中新增的特性衫樊，所以會遇到有些瀏覽器不支持的情況，這是我們就需要查看canvas對象中是否存在getContext方法：
<script>
window.onload = function () {
//在畫布上畫個矩形
var canvas = document.getElementById('draw');
//判斷瀏覽器是否支持Canvas
if (canvas.getContext) {
console.info("you hava canvas");
var context = canvas.getContext("2d");
context.fillRect(10,10,100,100);
} else {
console.info("soory, no canvas support ApI");
}
};
</script>
此外我們還可以這樣做：
<canvas id="draw" width="600" height="200">Please upgrade your browser!</canvas>
只要瀏覽器看到不認(rèn)識的元素利花，默認(rèn)行為就顯示其中包含的文本橡伞。所以盒揉，不支持Canvas的瀏覽器看到<canvas>元素時，它們就會顯示Please upgrade your browser!兑徘。另一方面刚盈，支持畫布的瀏覽器會直接忽略畫布標(biāo)記之間的所有文本，所以不會顯示這個文本挂脑。
實例演示
現(xiàn)在藕漱，我們開始通過一個實例來學(xué)習(xí)使用Canvas繪制矩形、圓崭闲、文本肋联、圖片等功能。先看看效果：
建立HTML刁俭，并增加form表單
先新建一個HTML的頁面橄仍，并增加form表單控件
<!DOCTYPE HTML>
<html>
<head>
<title>TweetShirt</title>
<meta charset="utf-8">
<style>
canvas{
border: 1px solid black;
}
</style>
<script src = "tweetshirt.js">
</script>
</head>
<body>
<h1>TweetShirt</h1>
<canvas id="tshirtCanvas" width="600" height="200">Please upgrade your browser to use TweetShirt!</canvas>
<form>
<p>
<label for="backgroudColor">選擇背景顏色: </label>
<select id = "backgroundColor">
<option value="white" selected="selected">白色</option>
<option value="black">黑色</option>
</select>
</p>
<p>
<label for="shape">選擇圖形: </label>
<select id = "shape">
<option value="none" selected="selected">無</option>
<option value="circles">圓形</option>
<option value="squares">正方形</option>
</select>
</p>
<p>
<label for="foregroundColor">選擇前景顏色: </label>
<select id = "foregroundColor">
<option value="black" selected="selected">黑色</option>
<option value="white">白色</option>
</select>
</p>
<p>
<input type="button" id="previewButton" value="預(yù)覽">
</p>
</form>
</body>
</html>
JavaScript處理表單控件
新建一個JavaScript文件tweetshirt.js，首先啟動預(yù)覽按鈕牍戚，這樣點擊這個按鈕時它就會調(diào)用一個JavaScript函數(shù)來處理Canvas繪制侮繁。
window.onload = function () {
var button = document.getElementById("previewButton");
button.onclick = previewHandler;
}
<!--預(yù)覽點擊事件-->
function previewHandler() {
var canvas = document.getElementById("tshirtCanvas");
var context = canvas.getContext("2d");
//繪制圖像之前，重置之前繪制的內(nèi)容
fillBackgroudColor(canvas,context);
//查看界面選擇了哪種顏色
var selectObj = document.getElementById("shape");
var index = selectObj.selectedIndex; //得到表單控件選項的編號的數(shù)組
var shape = selectObj[index].value; //得到選項的值
if (shape == "squares") {
for(var squares = 0 ; squares < 20; squares++) {
//繪制正方形
drawSquare(canvas,context);
}
}
if (shape == "circles") {
for(var circles = 0 ; circles < 20; circles++) {
//繪制圓
drawCircle(canvas,context);
}
}
//繪制文本
drawText(canvas,context);
//繪制圖片
drawImage(canvas,context);
}
function fillBackgroudColor(canvas,context) {
var selectObj = document.getElementById("backgroundColor");
var index = selectObj.selectedIndex;
var bgColor = selectObj[index].value;
//fillStyle保存畫布上完成繪制時所用的顏色,它是一個屬性而不是方法如孝，所以需要設(shè)置而不是調(diào)用
context.fillStyle = bgColor;
context.fillRect(0,0,600,200);
}
繪制矩形
- 指定正方形的邊長
- 指定正方形的位置x和y
- 設(shè)置正方形的屬性
- 繪制正方形
//畫正方形
function drawSquare(canvas,context) {
var w = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.fillStyle = "lightblue";
context.fillRect(x,y,w,w);
}
繪制線
- beginPath方法告訴畫布開始一個新路徑
- moveTo方法把畫筆移到畫布上的指定點
- lineTo方法描繪路徑宪哩，從畫筆的當(dāng)前位置描繪到畫布上的另一個點
- closePath方法將路徑的起始點連接到當(dāng)前路徑的最后一個點
//繪制線
function drawLine(canvas, context) {
context.beginPath();
context.moveTo(100, 150);
context.lineTo(250, 75);
context.lineTo(125, 30);
context.closePath();
context.lineWidth = 5;
context.stroke();
context.fillStyle = "red";
context.fill();
}
繪制圓形
- 創(chuàng)建一個路徑
- 填充arc方法參數(shù)
- 設(shè)置圓的屬性
- 填充圓
先來分析arc方法
context.arc(x,y,radius,startAngle,endAngle.direction);
- x和y：確定圓心在畫布上的位置
- radius：圓的半徑
- startAngle：圓弧的起始角，確定路徑的起點第晰，可以為負(fù)值（表示按負(fù)方向度量）锁孟，單位為弧度
- endAngle：圓弧的終止角，確定路徑的終點茁瘦，可以為負(fù)值（表示按負(fù)方向度量）品抽，單位為弧度
- direction： true表示逆時針畫弧，false表示順時針畫弧
//畫圓形
function drawCircle(canvas,context) {
var radius = Math.floor(Math.random() * 40);
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x,y,radius,0,degreeToRadians(360),true);
context.fillStyle = "red";
context.fill();
}
//度數(shù)轉(zhuǎn)弧度
function degreeToRadians(degree) {
return (degree * Math.PI) / 180;
}
繪制文本
- 設(shè)置文本的屬性
- 填充文本
//畫文本
function drawText(canvas,context) {
var selectObj = document.getElementById("foregroundColor");
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;
context.fillStyle = fgColor; //設(shè)置字體顏色
context.font = "bold 1em sans-serif"; //設(shè)置字體
context.textAlign = "left"; //設(shè)置對齊方式
context.fillText("I saw this tweet",20,40); //填充文本
context.font = "bold 1em sans-serif";
context.textAlign = "right";
context.fillText("and I got was this lousy t-shirt!",canvas.width-20,canvas.height-40);
}
繪制圖片
- 首先甜熔，創(chuàng)建一個JavaScript Image對象
- 設(shè)置這個Image對象的圖片來源地址
- 調(diào)用drawImage方法繪制圖片
function drawImage(canvas,context) {
var image = new Image();
image.src = "twitterBird.png";
//表示圖片加載完成桑包，就執(zhí)行這個函數(shù)
image.onload = function () {
context.drawImage(image,20,120,70,70);
}
}
效果:
