canvas是H5非常受歡迎的功能,利用<canvas>標簽在頁面中設定一個區(qū)域,然后就可以在這個區(qū)域中繪制圖形
基本用法
- 首先引入
<canvas>,并且就相當與一塊畫布,首先我們要指定畫布的大小,即就是width和height
<canvas width="400px" height="400px" id="ca"></canvas> - 要在這塊畫布上畫圖,,需要取得繪圖上下文,調(diào)用
getContext()方法并傳入?yún)?shù)'2d',需要先檢測瀏覽器是否支持getContext()方法
var ca = document.getElementById('ca');
if(ca.getContext){
var context = ca1.getContext('2d');
}
- 最后我們就可以使用一些方法進行繪圖啦
2d上下文的兩種基本繪圖操作是填充和描邊
常見的繪制圖形的方法 -
fillRect():描邊矩形,四個參數(shù),x,y坐標,矩形的長寬 -
strokeRect():填充矩形,參數(shù)同上 -
clearRect():清除畫布上的矩形區(qū)域 -
arc(x,y,radius,startAngle,endAngle,counterclockwise):以(x,y)為圓心畫半徑為radius的弧線,起始角度,結(jié)束角度,最后一個參數(shù)表示角度是否按照逆時針方向計算 -
arcTo(x1,y1,x2,y2,radius):從上一點開始繪制一條曲線,到(x2,y2)為止,并且以指定的半徑穿過(x1,y1); -
lineTo(x,y):從上一點開始繪制一條線,到(x,y)為止 -
moveTo(x,y):將繪圖游標移動到(x,y),不畫線 -
fillText():繪制文本,接收四個參數(shù),要繪制的文本字符串,x坐標,y坐標,和可選的最大像素寬度 -
strokeText():繪制文本,參數(shù)同上 -
drawImage():繪制圖像,最簡單的參數(shù)組合方式是傳入一個HTML<img>元素,以及繪制該圖像起點的橫縱坐標
寫些小demo練習練習
var canvas = document.getElementById('ca');
if(canvas.getContext){
var context = canvas.getContext('2d');
var context = canvas.getContext('2d');
}
//繪制兩個矩形
context.fillStyle = 'red';
context.fillRect(10,10,20,20);
context.strokeStyle = 'black';
context.strokeRect(40,10,20,20);
//繪制一個鐘表
context.beginPath();
context.arc(50,100,50,0,2*Math.PI,false);//繪制外圓
context.moveTo(96,100);//將繪圖游標移到內(nèi)圓的起點位置
context.arc(50,100,46,0,2*Math.PI,false);//繪制內(nèi)園
context.moveTo(50,100);//將游標移動到圓心位置
context.lineTo(50,60);//繪制分針
context.moveTo(50,100);//將游標移到圓心位置
context.lineTo(18,100);//繪制時針
//開始繪制鐘表上的時間文本
context.textBaseline = 'middle';
context.textAlign = 'center';
context.font = 'blod 10px Arial';
context.fillStyle = 'black';
context.fillText('9',10,100);
context.fillText('12',50,60);
context.fillText('3',90,100);
context.fillText('6',50,140);
context.stroke();
