一、什么是Canvas
Canvas 是H5的一部分，允許腳本語言動態(tài)渲染圖像。Canvas 定義一個區(qū)域，可以由html屬性定義該區(qū)域的寬高，javascript代碼可以訪問該區(qū)域，通過一整套完整的繪圖功能（API）,在網(wǎng)頁上渲染動態(tài)效果圖。
二、Canvas 能做什么
游戲：毫無疑問，游戲在HTML5領域具有舉足輕重的地位。HTML5在基于Web的圖像顯示方面比Flash更加立體、更加精巧。
圖表制作：圖表制作時常被人們忽略，但無論企業(yè)內部還是企業(yè)間交流合作都離不開圖表?，F(xiàn)在一些開發(fā)者使用HTML/CSS完成圖標制作。當然，使用SVG（可縮放矢量圖形）來完成圖表制作也是非常好的方法。
字體設計：對于字體的自定義渲染將完全可以基于Web，使用HTML5技術進行實現(xiàn)。
圖形編輯器：圖形編輯器能夠100%基于Web實現(xiàn)。
其他可嵌入網(wǎng)站的內容：類似圖表、音頻、視頻，還有許多元素能夠更好地與Web融合，并且不需要任何插件。
三、Canvas基本用法
1、使用<canvas>必須先設置其width和height屬性，指定可繪圖區(qū)域大小,只指定寬高不添加樣式或者繪制圖像的話，在頁面中將看不到該元素。
<canvas id='draw' width='200px' height='200px'></canvas>
2、繪制圖像的話，我們首先要取到canvas并調用getContext()方法，然后傳入上下文名字（2D/3D）,2D有兩種基本繪圖操作|填充(fillStyle)|描邊(strokeStyle)|，這兩個屬性默認值為#000
var draw = document.getElementById('draw');
//確認瀏覽器是否支持<canvas>元素
if(draw.getContext){
var context = draw.getContext('2d');
//給context繪制紅色的邊框
context.strokeStyle = '#f00';
//內部填充大草原的顏色
context.fillStyle = '#0f0';
}
3、使用toDataURL()方法，可以導出<canvas>元素上繪制的圖像
var draw = document.getElementById('draw');
if(draw.getContext){
//顯示圖像，toDataURL()獲取到的是一串base64的字符串
var drawURL = draw.toDataURL('image/png');
var image = document.createElement('img');
image.src = drawURL;
document.body.appendChild(image);
}
4、繪制矩形，主要有三個方法，fillRect()為矩形填充顏色、strokeRect()為矩形描邊、clearRect()清除矩形。這三個方法都接收4個參數(shù)x/y/w/h，矩形的左上角坐標和寬高
var draw = document.getElementById('draw');
//確認瀏覽器是否支持<canvas>元素
if(draw.getContext){
var context = draw.getContext('2d');
//繪制紅色矩形,綠色描邊
context.fillStyle = '#f00';
context.strokeStyle = '#0f0';
context.strokeRect(10,10,50,50);
context.fillRect(10,10,50,50);
//繪制綠色矩形,紅色描邊
context.fillStyle = '#0f0';
context.strokeStyle = '#f00';
context.strokeRect(10,10,50,50);
context.fillRect(10,10,50,50);
//在兩個矩形重疊的地方清除一個小矩形
context.clearRect(40,40,10,10);
}
5、繪制路徑，通過路徑可以創(chuàng)造出復雜的形狀和線條，要繪制路徑，首先要調用beginPath()方法，再通過以下方法來實際的繪制路徑
arc(x,y,radius,startAngle,endAngle,conterclockwise)
(x,y)圓心坐標、radius半徑、(startAngle,endAngle)起始角度和終止角度、conterclockwise順時針(false)/逆時針(true)
moveTo(x,y) 將游標移動到(x,y)，不畫線?？梢杂脕硇薷乃^的上一點坐標*
arcTo(x1,y1,x2,y2,radius)
從上一點開始繪制一條曲線到(x2,y2),并且以給定的radius穿過(x1,y1)
lineTo(x,y) 從上一點開始繪制一條直線，到(x,y)
rect(x,y,width,height)
從(x,y)開始繪制一個矩形，寬高為width、height。這個方法繪制的是矩形路徑，而非strokeRect()和fillRect()所繪制的獨立的形狀
//接下來繪制一個不帶數(shù)字的時鐘
var draw = document.getElementById('draw');
if(draw.getContext){
var context = draw.getContext('2d');
//開始路徑
context.beginPath();
//繪制外圓
context.arc(100,100,99,0,2*Math.PI,false);
//繪制內圓
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//繪制分針
context.moveTo(100,100);
context.lineTo(100,15);
//繪制時針
context.moveTo(100,100);
context.lineTo(35,100);
//描邊路徑
context.stroke();
context.strokeStyle = '#f00';
}
6 . 繪制文本，主要有兩個方法，fillText(),strokeText(),都接收四個參數(shù)|text(要繪制的文本)|x|y|最大像素寬度(可選)|，這兩個方法都已下列三個屬性為基礎
font文字樣式，大小，字體等
textAlign 文本對其方式|start|end|left|right|center|
textBaseline 文本的基線|top|hanging|middle|alphabetic|ideographic|bottom|
//在表盤繪制12點
context.font = 'bold 12px Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('12',100,20);
7 . 變換
rotate(angel) 圍繞原點旋轉圖像angle弧度
scale(scaleX,scaleY) 縮放圖像，x*scaleX,y*scaleY 默認1
translate(x,y) 將坐標原點移動到(x,y)
var draw = document.getElementById('draw');
if(draw.getContext){
var context = draw.getContext('2d');
//開始路徑
context.beginPath();
//繪制外圓
context.arc(100,100,99,0,2*Math.PI,false);
//繪制內圓
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//變換原點
context.translate(100,100);
//旋轉表針
context.rotate(1)
//繪制分針
context.moveTo(0,0);
context.lineTo(0,-85);
//繪制時針
context.moveTo(0,0);
context.lineTo(-65,0);
//描邊路徑
context.stroke();
context.strokeStyle = '#f00';
}
8 . 繪制圖像，drawImage()
var img = document.getElementByTagNames('image')[0];
context.drawImage(img,0,10,50,50,0,100,40,60);
9個參數(shù): 要繪制的圖像 原圖像|x|y|w|h| 目標圖像|x|y|w|h|
9 . 陰影和漸變
陰影主要是以下幾個屬性值
- shadowColor
- shadowOffsetX : X軸陰影偏移量
- shadowOffsetY : Y軸陰影偏移量
- shadowBlur : 模糊像素數(shù)，默認0，不模糊
var context = draw.getContext('2d');
//設置陰影
context.shadowColor = 'rgba(210,210,210,.5)';
context.shadowOffersetX = '5';
漸變 創(chuàng)建一個新的線性漸變 createLinearGradient()方法，有四個參數(shù)|x1|y1|x2|y2|分別為起點的坐標和終點的坐標
var gradient = context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,'#fff'); //0表示開始
gradient.addColorStop(1,'#000'); //1表示結束
//使用定義好的漸變屬性
context.fillStyle = gradient; //填充的時候放入漸變
context.fillRect(30,30,50,50);
創(chuàng)建一個放射漸變 createRadialGradient(),六個參數(shù)|x1|y2|radius1|x2|y2|radius2|分別為第一個圓心和半徑第二個圓心和半徑，用法和線性漸變相同
10 . 使用圖像數(shù)據(jù)，可以通過getImageData()取得原始圖像數(shù)據(jù)。四個參數(shù)|x|y|w|h|。每個ImageData對象有三個屬性，width/height/data，data是一個數(shù)組，內部存著每一個像素的數(shù)據(jù),每個元素的值介于0-255之間
var imgdata = context.getImageData(0,0,100,100);
var data = imgdata.data,
red = data[0],
green = data[1],
blue = data[2],
alpha = data[3];
//實現(xiàn)一個灰色過濾器
var draw = document.getElementById('draw');
if(draw.getContext){
var context = draw.getContext('2d');
var img = document.getElementsByTagName('image')[0],
imageData,data,
i,len,average,
red,green,blue,alpha;
//繪制原始圖像
context.drawImage(img,0,0,100,100);
//獲取圖像數(shù)據(jù)
imageData = context.getImageData(0,0,img.width,img.height);
data = imageData.data;
for(i=0,len=data.length;i<len;i+=4){
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3];
//計算rgb的平均值
average = Math.floor((red+green+blue)/3);
//設置顏色值
data[i] = average;
data[i+1] = average;
data[i+2] = average;
}
imageData.data = data;
//把數(shù)據(jù)繪制在畫布
context.putImageData(imageData,0,0)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
