html5--canvas上篇

一：什麼是canvas

canvas是一對標籤;canvas是一個可以使用腳本(通常爲JavaScript)在其中繪製圖形的 HTML 元素.它可以用於製作照片集或者製作簡單(也不是那麼簡單)的動畫。canvas擁有和其他標籤一樣的通用屬性，如id，width,height,background等等。

二：canvas的基本使用

1、獲取context對象

通過腳本（通常爲JavaScrip）在canvas中繪製圖形主要是通過context對象，context對象的獲取方法如下

//首先通過ID獲取canvas
var canvas = document.getElementById("canvas");
//然後通過canvas獲取context對象，注意獲取方法中的參數爲2d
var context = canvas.getContext("2d");

2、繪製基本圖形

canvas中可以繪製矩形、路徑（通過路徑繪製其他圖形）、文本、圖片

（1）繪製矩形

fillRect(x,y,width,height)：繪製一個填充的矩形

strokRect(x,y,width,height)：繪製一個矩形的邊框

clearRect(x,y,width,height)：清除指定矩形區域，讓清除部分完全透明。

（參數說明：x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。width和height設置矩形的尺寸）

例子：

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

效果圖：

（2）繪製路徑

繪製路徑的一些步驟：

1. 首先，你需要創建路徑起始點。
2. 然後你使用畫圖命令去畫出路徑。
3. 之後你把路徑封閉。
4. 一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。

繪製路徑所用的函數的說明：

beginPath()：新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑。

moveTo(x,y)：將筆觸移動到指定的座標x以及y上。(即起始點，從這個點（x，y）可以畫)

lineTo(x,y)：繪製一條從當前位置到指定x以及y位置的直線。

arc(x,y,radius,startAngle,endAngle,anticlockwise)：畫一個以（x,y）爲圓心的以radius爲半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認爲順時針）來生成。

arcTo(x1,y1,x2,y2,radius)：根據給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。

closePath()：閉合路徑之後圖形繪製命令又重新指向到上下文中。

stroke()：通過線條來繪製圖形輪廓。

fill()：通過填充路徑的內容區域生成實心的圖形

例子：畫笑臉

function smileFace(){
	canvas = document.getElementById("canvas");
	if(canv.getContext){
		var context = canv.getContext("2d");
		context.beginPath();
		context.arc(50,50,50,0,Math.PI*2,false);
		context.stroke();
		context.moveTo(25,30);
		context.arc(25,30,2,0,Math.PI*2,true);
		context.stroke();
		context.moveTo(75,30);
		context.arc(75,30,2,0,Math.PI*2,true);
		context.stroke();
		context.moveTo(50,60);
		context.arc(50,60,2,0,Math.PI*2,true);
		context.stroke();
		context.moveTo(37,75);
		context.arcTo(60,78,63,75,15);
		context.stroke();
	}
}

效果圖:

（3）繪製文本

canvas 提供了兩種方法來渲染文本:


fillText(text,x,y[,maxWidth])：在指定的(x,y)位置填充指定的文本，繪製的最大寬度是可選的.

fillText(text,x,y[,maxWidth])：在指定的(x,y)位置繪製文本邊框，繪製的最大寬度是可選的.

參數說明：text：需要繪製的文本  x,y：文本的位置

例子：

//文本
function tx(){
	if(canv.getContext){
		var context = canv.getContext("2d");
                //設置字體的樣式
               content.font ="100px serif";
		context.strokeText("hello world!",50,50);
		context.fillText("hello world!",50,100)
	}
}

效果圖：

（4）使用圖片

引入圖像到canvas裏需要以下兩步基本操作：

1. 獲得一個指向HTMLImageElement的對象或者另一個canvas元素的引用作爲源，也可以通過提供一個URL的方式來使用圖片
2. 使用drawImage()函數將圖片繪製到畫布上

canvas的API可以使用下面這些類型中的一種作爲圖片的源：

HTMLImageElement：這些圖片是由Image()函數構造出來的，或者任何的<img>元素

HTMLVideoElement：用一個HTML的 <video>元素作爲你的圖片源，可以從視頻中抓取當前幀作爲一個圖像

HTMLCanvasElement：可以使用另一個 <canvas> 元素作爲你的圖片源。

ImageBitmap：這是一個高性能的位圖，可以低延遲地繪製，它可以從上述的所有源以及其它幾種源中生成。

例子：

//圖片和陰影
function pic(){
	if(canv.getContext){
		var context = canv.getContext("2d");
		var img  = new Image();
		img.src = "img/0.jpg";
		img.onload = function(){
			var pattern = context.createPattern(img,"no-repeat");
			context.shadowOffsetX = 2;
			context.shadowOffsetY = 2;
			context.shadowBlur = 10;
			context.shadowColor = "rgba(0,0,0,0.7)";
			context.fillStyle = pattern;
			context.fillRect(0,0,300,300);
		}
	}
}

這一篇只是介紹canvas的簡單使用，下一篇會介紹canvas的一些好玩的知識點