<canvas>元素是HTML5添加的特性，這個(gè)元素負(fù)責(zé)在頁面中設(shè)定一個(gè)區(qū)域，然后就可以通過 JS 動(dòng)態(tài)地在這個(gè)區(qū)域中繪制圖形森渐。
15.1 基本用法
要使用<canvas>元素趾娃，必須先設(shè)置其width和height屬性，指定可以繪圖的區(qū)域大小喂很。
<canvas id="drawing" width="200" height="200" >
A drawing of something
</canvas>
使用 toDataURL() 方法惜颇，可以導(dǎo)出在<canvas>元素上繪制的圖像。這個(gè)方法接收一個(gè)參數(shù)少辣，即圖像的MIME類型格式凌摄，而且適合用于創(chuàng)建圖像的任何上下文。
15.2 2D上下文
2D上下文的坐標(biāo)開始于 <canvas> 元素的左上角漓帅，原點(diǎn)坐標(biāo)是(0,0)锨亏。所有坐標(biāo)值都基于這個(gè)原點(diǎn)計(jì)算，x值越大表示越靠右忙干，y值越大表示越靠下器予。
15.2.1 填充和描邊
2D 上下文的兩種基本繪圖操作是填充和描邊。
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
context.strokeStyle = 'red'; //描邊
context.fillStyle = "#0000ff"; //填充
}
15.2.2 繪制矩形
矩形是唯一一種可以直接在 2D 上下文中繪制的形狀捐迫。與矩形有關(guān)的方法包括 fillRect()乾翔、strokeRect()和clearRect()。這三個(gè)方法都能接收4個(gè)參數(shù)：矩形的x坐標(biāo)施戴，矩形的y坐標(biāo)反浓，
矩形寬度和矩形高度。單位都是像素赞哗。
(1) fillRect() 方法在畫布上繪制的矩形會(huì)填充指定的顏色勾习。填充顏色通過 fillStyle 屬性指定
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//繪制紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
}
(2) strokeRect() 方法在畫布上繪制的矩形會(huì)使用指定的顏色描邊。描邊顏色通過 strokeStyle 屬性指定
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
context.lineWidth = 10; //控制線條寬度
context.lineCap = 'square';//控制線條末端形狀：butt：平頭 round: 圓頭 square: 方頭
context.lineJoin = "miter" //控制線條相交方式圓交懈玻、斜交巧婶、斜接(round,bevel,miter)
//繪制紅色描邊矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10,10,50,50);
//繪制半透明的藍(lán)色描邊矩形
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30,30,50,50);
}
(3) clearRect() 方法用于清除畫布上的矩形區(qū)域乾颁，這個(gè)方法可以把繪制上下文中的某一矩形區(qū)域變透明。
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//繪制紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//繪制半透明的藍(lán)色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
//在兩個(gè)矩形重疊的地方清除一個(gè)小矩形
context.clearRect(35,35,20,20);
}
15.2.3 繪制路徑
//繪制一個(gè)不帶數(shù)字的時(shí)鐘表盤
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//開始路徑
context.beginPath();
//繪制外圓
context.arc(100, 100, 100, 0, 2 * Math.PI, false);
//繪制內(nèi)圓
context.moveTo(194, 100);
context.arc(100, 100, 90, 0, 2 * Math.PI, false);
//繪制分針
context.moveTo(100, 100);
context.lineTo(100, 15);
//繪制時(shí)針
context.moveTo(100, 100);
context.lineTo(35, 100);
//描邊路徑
context.stroke();
}
//繪制一條彎曲的線
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//指定繪制路徑的起始點(diǎn)
context.moveTo(50, 50);
//繪制一條到坐標(biāo)(150,50)的水平直線
context.lineTo(150, 50);
//端點(diǎn)1
var p1 = {
x: 200,
y: 50
};
var p2 = {
x: 200,
y: 100
};
context.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
//設(shè)置線條顏色為藍(lán)色
context.strokeStyle = "blue";
//按照上述繪制路徑繪制弧線
context.stroke();
}
15.2.4 繪制文本
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//開始路徑
context.beginPath();
context.font = "bold 14px Arial";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('12', 100, 20);
context.fillText('9', 20, 100);
context.fillText('6', 100, 140);
context.fillText('3', 180, 100);
//起點(diǎn)對齊
context.textAlign = "start";
context.fillText("12", 100, 40);
//終點(diǎn)對齊
context.textAlign = "end";
context.fillText('12',100,60);
//繪制外圓
context.arc(100, 100, 100, 0, 2 * Math.PI, false);
//繪制內(nèi)圓
context.moveTo(194, 100);
context.arc(100, 100, 90, 0, 2 * Math.PI, false);
//繪制分針
context.moveTo(100, 100);
context.lineTo(100, 15);
//繪制時(shí)針
context.moveTo(100, 100);
context.lineTo(35, 90);
//描邊路徑
context.stroke();
}
15.2.5 變換
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//開始路徑
context.beginPath();
context.font = "bold 14px Arial";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('12', 100, 20);
context.fillText('9', 20, 100);
context.fillText('6', 100, 140);
context.fillText('3', 180, 100);
//起點(diǎn)對齊
context.textAlign = "start";
context.fillText("12", 100, 40);
//終點(diǎn)對齊
context.textAlign = "end";
context.fillText('12',100,60);
//繪制外圓
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
//繪制內(nèi)圓
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
//變換原點(diǎn)
context.translate(100, 100);
//旋轉(zhuǎn)表針
context.rotate(0.2);
//繪制分針
context.moveTo(0, 0);
context.lineTo(0, -85);
//繪制時(shí)針
context.moveTo(0, 0);
context.lineTo(-65, 0);
//描邊路徑
context.stroke();
}
15.2.6 繪制圖像
</img>
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
var image = document.images[0];
context.drawImage(image, 20, 10, 50, 50, 260, 100, 40, 60);
}
15.2.7 陰影
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
//設(shè)置陰影
context.shadowOffsetX = 10; //x軸方向的陰影偏移量
context.shadowOffsetY = 10; //y軸方向的陰影偏移量
context.shadowBlur = 4; //模糊的像素?cái)?shù)艺栈，默認(rèn)為0英岭，即不模糊
context.shadowColor = 'rgba(0,0,0,0.5)'; //陰影顏色，默認(rèn)為黑色
//繪制紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//繪制藍(lán)色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30,30,50,50);
}
15.2.8 漸變
(1) 橫向漸變
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
var gradient = createRectLinearGradient(context,30,30,50,50);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'black');
//繪制紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//繪制漸變矩形
context.fillStyle = gradient;
context.fillRect(30,30,50,50);
}
//確保漸變與形狀對齊
function createRectLinearGradient(context, x, y, width, height){
return context.createLinearGradient(x,y,x+width,y+height);
}
//徑向漸變(或放射漸變)
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
var gradient = context.createRadialGradient(55,55,10,55,55,30);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'black');
//繪制紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
//繪制漸變矩形
context.fillStyle = gradient;
context.fillRect(30,30,50,50);
}
15.2.9 模式
模式其實(shí)就是重復(fù)的圖像湿右，可以用來填充或描邊圖形
</img>
var drawing = document.getElementById('drawing');
//確定瀏覽器支持<canvas>元素
if( drawing.getContext ){
var context = drawing.getContext('2d');
var image = document.images[0],
pattern = context.createPattern(image, 'no-repeat');
//繪制矩形
context.fillStyle = pattern;
context.fillRect(10,10,150,150);
}
15.2.10 使用圖像數(shù)據(jù)
可以通過 getImageData() 取得原始圖像數(shù)據(jù)诅妹。這個(gè)方法接收4個(gè)參數(shù)：
要取得其數(shù)據(jù)的畫面區(qū)域的x和y坐標(biāo)以及該區(qū)域的像素寬度和高度。
15.2.11 合成
15.3 WebGL
