視頻地址：慕課·canvas小球倒計時
代碼下載請移步：github
演示地址：在線演示
一、canvas簡介
canvas是HTML5中新加入的標(biāo)簽，但是其真正的控制卻大多需要javascript來控制。在標(biāo)簽內(nèi)可以寫一些不支持HTML5的瀏覽器的提示文字，不用擔(dān)心如果瀏覽器支持HTML5則標(biāo)簽內(nèi)的文本不會顯示。
示例：
<canvas id="canvas" >
您的瀏覽器不支持html5請使用現(xiàn)代瀏覽器。
</canvas>
提示：由于需要在javascript中獲取該元素，所以需要給canvas設(shè)置id屬性
二、canvas基礎(chǔ)
在頁面中聲明canvas標(biāo)簽后就可以在javascript中獲取并操作canvas畫布啦。
<script type="text/javascript">
//頁面默認(rèn)調(diào)用函數(shù)
window.onload=function(){
//獲取canvas標(biāo)簽元素
var canvas=document.getElementById('canvas');
//設(shè)置canvas寬、高
canvas.width=500;
canvas.height=500;
//獲取2d上下文
var context=canvas.getContext('2d');
}
</script>
以上代碼就是獲取和初步設(shè)置cnavas屬性的代碼。在設(shè)置canvas的寬高時不建議添加單位，因為可以把canvas看作一張畫布，設(shè)定寬、高時除了設(shè)定畫布大小之外也需要設(shè)置畫布的點(diǎn)密度，如果帶單位時只能設(shè)置畫布的大小，而如果不帶單位除了設(shè)置畫布大小外也同時設(shè)置了畫布的點(diǎn)密度。
在獲取到標(biāo)簽元素后如果要在畫布中進(jìn)行繪制還需要獲取文件的上下文，可以獲取2d、3d上下文，但是html5中推薦支持的是2d上下文，所以用2d上下文瀏覽器支持更好，而且大多數(shù)圖形使用2d上下文已經(jīng)夠用。
三、canvas API簡介
有了一張畫布后我們就可以在畫布上進(jìn)行繪制啦。
- 繪制路徑
可以使用moveTo(x,y)方法設(shè)置路徑的起點(diǎn)，使用方法lineTo(x,y)設(shè)置繪制路徑的終點(diǎn)，使用stroke()方法渲染路徑。但是在我們連續(xù)繪制多條路徑時會發(fā)現(xiàn)繪制的多條路徑格式設(shè)置是相同的。因此為了避免繪制不同樣式路徑造成的不便可以在繪制路徑前用beginPath()函數(shù)和closePath()函數(shù)把路徑包裹起來，這樣在重新繪制時就可以使用新的樣式啦。
/*----------- draw line 1 --------------*/
context.beginPath();
context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(100,700);
context.lineTo(100,100);
context.lineTo(700,700);
context.lineWidth=5;
context.strokeStyle="red";
context.stroke();
//context.fill();
context.closePath();
API:
|函數(shù)|性質(zhì)|意義|
| :---: | : ---: | :---: |
|beginPath()| 方法| 開始一段路徑 |
|moveTo() | 方法 | 路徑起始點(diǎn) |
|lineTo() | 方法 | 路徑終點(diǎn) |
|lineWidth |屬性 | 路徑寬度 |
|strokeStyle|屬性 | 路徑顏色 |
|stroke() |方法 | 渲染路徑 |
|fill() |方法 | 填充封閉路徑 |
|closePath()|方法 | 結(jié)束一段路徑 |
- 繪制矩形
繪制矩形也可以分為填充和繪制邊框兩種形式，使用fillRect(x,y,width,height)函數(shù)繪制實心矩形，使用strokeRect(x,y,width,height)函數(shù)繪制空心矩形。clearRect(x,y,width,height)函數(shù)來清除矩形區(qū)域。
/*--------- draw rect-------------------*/
context.beginPath();
context.fillStyle='yellow';
context.fillRect(10,10,10,10);
context.strokeStyle="black";
context.strokeRect(30,30,30,30);
context.closePath();
漸變的色條其實也是一個矩形塊，可以使用createLinearGradient(x1,y1,x2,y2)函數(shù)來設(shè)置漸變色帶的漸變方向，x1,y1代表起點(diǎn),x2,y2代表終點(diǎn)。可以使用addColorStop(0,'顏色值'),addColorStop(1,'顏色值')來設(shè)置起點(diǎn)顏色和終點(diǎn)顏色。然后用設(shè)定的樣式填充一個矩形。
/*-------- draw linearGradient ---------*/
var linear=context.createLinearGradient(0,0,50,300);
linear.addColorStop(0,'red');
linear.addColorStop(1,'green');
context.fillStyle=linear;
context.fillRect(10,10,200,200);
同樣的繪制陰影也可以看作是在圖形后面繪制一個其它矩形色塊，代碼如下。
/* ------ draw shandow -----------------*/
context.beginPath();
context.shadowOffsetX = 20; // 設(shè)置水平位移
context.shadowOffsetY = -20; // 設(shè)置垂直位移
context.shadowBlur = 6; // 設(shè)置模糊度
context.shadowColor = "rgba(0,0,0,0.5)"; // 設(shè)置陰影顏色
context.fillStyle = "#CC0000";
context.fillRect(150,200,200,400);
context.closePath();
- 繪制圓形、弧線
弧線的繪制函數(shù)arc(x,y,r,startAngle, endAngle, anticlockwise)
x,y表示圓心的坐標(biāo)，r表示半徑，startAngle、endAngle代表開始弧度與結(jié)束弧度，anticloclwise表示弧線繪制是順時針(false)還是逆時針(true)。
/*----------- draw circly -----------*/
context.beginPath();
context.lineWidth=5;
context.strokeStyle="blue";
context.arc(300,300,200,0,1.5*Math.PI,true);
context.stroke();
context.closePath();
如果要繪制原型將開始弧度、結(jié)束弧度分別設(shè)為0,2PI即可
* ----------- 實心圓 ---------------*/
context.beginPath();
context.fillStyle='red';
context.arc(50,50,50,0,2*Math.PI,true);
context.fill();
context.closePath();
/*----------- 空心圓 ---------------*/
context.beginPath();
context.lineWidth=5;
context.strokeStyle='red';
context.arc(200,200,50,0,2*Math.PI,true);
context.stroke();
context.closePath();
- 繪制文字
使用fillText(string,x,y)函數(shù)來繪制一段文字，string代表要繪制的問題，x、y代表起點(diǎn)坐標(biāo)。strokeText(string,x,y)函數(shù)繪制空心文字。
/* ------- 繪制文字 --------------*/
context.beginPath();
//設(shè)置字體
context.font="Bold 20px Arial";
//設(shè)置對齊方式
context.textAlign="left";
context.lineWidth=2;
context.fillStyle="slive";
context.fillText("Hello ",300,300);
context.strokeText("world!",400,400);
context.closePath();
- 繪制圖片
繪制圖片之前必須首先加載圖像。
var img=new Image();//創(chuàng)建對象
img.src="img/login2.jpg";//加載圖片
img.onload=function(){
//加載圖像
if(img.width!=canvas.width){
canvas.width=img.width;
}
if(img.height!=canvas.height){
canvas.height=img.height;
}
context.drawImage(img,0,0);
}
- 保存、加載上下文設(shè)置
context.save();
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 5;
context.shadowColor = "rgba(0,0,0,0.5)";
context.fillStyle = "#CC0000";
context.fillRect(10,10,150,100);
context.restore();
context
context.fillStyle = "#000000";
context.fillRect(180,10,150,100);
上面代碼先用save方法，保存了當(dāng)前設(shè)置，然后繪制了一個有陰影的矩形。接著，使用restore方法，恢復(fù)了保存前的設(shè)置，繪制了一個沒有陰影的矩形。
四、像素處理
