什么是canvas

HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。

創(chuàng)建一個(gè)canvas

一個(gè)畫布在網(wǎng)頁中是一個(gè)矩形框，通過 <canvas> 元素來繪制.
注意: 默認(rèn)情況下 <canvas> 元素沒有邊框和內(nèi)容。你也可以添加。

使用如下代碼，你就在頁面中創(chuàng)建出來一個(gè)寬200px、高100px的canvas，如果沒有指定寬高，canvas的默認(rèn)寬高為300px * 150px,通常我們需要給canvas一個(gè)id以便在腳本中引用。

<canvas id="myCanvas" width="200" height="100"></canvas>

我們也可以動(dòng)態(tài)創(chuàng)建canvas，使用一下代碼，我們?cè)陧撁嬷袆?chuàng)建出了一個(gè)id為layer的canvas，指定了其寬高。

var canvas = document.createElement('canvas');
canvas.id = "layer";
canvas.width = 200;
canvas.height = 100;
document.body.appendChild(canvas);

canvas操作

我們可以使用canvas繪制線條、矩形、圓形、文本、圖像，可以對(duì)圖形、文本進(jìn)行顏色填充以及漸變填充。詳細(xì)內(nèi)容可查看基礎(chǔ)教程，其中我們用到的比較多的應(yīng)該是繪制圖像，繪制圖像會(huì)在下面專門講解。

canvas屬性中的寬高和css中寬高的區(qū)別

我們先看一個(gè)例子
我們使用屬性中的寬高創(chuàng)建一個(gè)canvas，其寬高為300px，我們?cè)谄渲挟嬕粭l線，從（0，0）點(diǎn)到（300，300）點(diǎn)。我們可以看出該圖顯示正常不會(huì)被拉伸。

<canvas id="layer" width="300" height="300">瀏覽器不支持Canvas,請(qǐng)升級(jí)或改用其它瀏覽器！</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("layer"),
    ctx = canvas.getContext('2d');
    ctx.moveTo(0,0);
    ctx.lineTo(300,300);
    ctx.stroke();
</script>

屬性寬高

接著我們給canvas設(shè)置一下style中寬高

 #layer {
       width: 150px;
       height: 300px;
}

效果如下，使用style時(shí)圖像會(huì)被拉伸（變形）

設(shè)置style

這是什么原因？？？我們需要搞清楚兩個(gè)概念：
1.畫布的寬和高（ps新建畫布的寬和高）；
2.畫布所在畫板的寬和高（例如ps打開后的窗口）；

默認(rèn)的畫板、畫布的寬和高是屬性中設(shè)置的寬高（例子中即為300*300）。但在畫布上設(shè)置style屬性的話，相當(dāng)于把畫板的寬和高改變了，而畫布的寬和高還是默認(rèn)值，所以 畫布會(huì)出現(xiàn)拉伸的情況，此例中設(shè)置的畫板的寬150和高300，相當(dāng)于將畫布的寬度縮小一倍，所以實(shí)際上畫出來的是黑色的那條。 直接設(shè)置寬和高相當(dāng)于是同時(shí)修改了畫板和畫布的寬和高（兩者一致），所以在畫布上畫的圖形不會(huì)出現(xiàn)拉伸（如紅色那條線）。

image.png

canvas繪制圖像

繪制圖像主要使用的是drawImage方法
drawImage() 方法在畫布上繪制圖像、畫布或視頻。
drawImage() 方法也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。
語法：
1.在畫布上定義圖像：
context.drawImage(img,x,y);
2.在畫布上定位圖像，并規(guī)定圖像的寬度和高度：
context.drawImage(img,x,y,width,height);
3.剪切圖像，并在畫布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

參數(shù)值：

以上基礎(chǔ)內(nèi)容查看w3c教程

繪制圖像中的填坑

1.繪制圖像時(shí)，canvas中沒有圖像

var drawimg = document.getElementById("drawimg");
var image=document.getElementById("image");
var context = drawimg.getContext("2d");
context.drawImage(image,10,10); 

原因是圖片是異步加載，在之前的代碼中，執(zhí)行js代碼的時(shí)候圖片有可能還沒有加載成功，就調(diào)用了drawImage()方法，所以圖片就無法顯示。所以在使用drawImage（）方法時(shí)，務(wù)必保證所繪圖像已經(jīng)加載好了。通常我們會(huì)將其放在圖片加載onload回調(diào)函數(shù)中確保這一點(diǎn)。

image.onload=function(){
   context.drawImage(devBgImg,imgX,imgY,imgWidth,imgHeight);
};

//例子
var img = new Image();
img.src ='devmonitor/res/main.jpg'; 
img.onload=function(){
ctx.drawImage(img,0,0,img.width,img.height,imgX,imgY,
      canvas.width*imgScale,canvas.height*imgScale);
};

canvas像素操作

語法
context.getImageData(x,y,width,height);

getImageData() 方法返回 ImageData 對(duì)象，該對(duì)象拷貝了畫布指定矩形的像素?cái)?shù)據(jù)。

ImageData對(duì)象中存儲(chǔ)著canvas對(duì)象真實(shí)的像素?cái)?shù)據(jù)，它包含以下幾個(gè)只讀屬性：

width
無符號(hào)長整型（unsigned long），使用像素描述 ImageData 的實(shí)際寬度。
height
無符號(hào)長整型（unsigned long），使用像素描述 ImageData 的實(shí)際高度。
data
Uint8ClampedArray類型的一維數(shù)組，包含著RGBA格式的整型數(shù)據(jù)，范圍在0至255之間（包括255）。

imageData.data;
一維數(shù)組，存儲(chǔ)了從canvas中獲取的每個(gè)像素的RGBA值。該數(shù)組為每個(gè)像素點(diǎn)保存了四個(gè)值——紅、綠、藍(lán)和alpha透明度。
imageData.data并不是一個(gè)真正的數(shù)組，而是一個(gè)類數(shù)組的對(duì)象-------Uint8ClampedArray，data是個(gè)一維數(shù)組！data的元素始終依次是red,green,blue,alpha,red,green,blue。。。一直重復(fù)到最后一個(gè)。所以，data的length始終是像素個(gè)數(shù)*4.而在循環(huán)data的時(shí)候，也是以4為步長。

imageData.data圖示

綜合例子我們可以對(duì)canvas中像素進(jìn)行操作

翻轉(zhuǎn)顏色

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// 反轉(zhuǎn)顏色(步長為4)
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,0,0);

灰度處理

例子中僅僅是用紅綠和藍(lán)的平均值。你也可以用加權(quán)平均，例如x = 0.299r + 0.587g + 0.114b這個(gè)公式。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// 反轉(zhuǎn)顏色(步長為4)
for (var i=0;i<imgData.data.length;i+=4)
  {
      var avg = (data[i] + data[i +1] + data[i +2]) / 3;
      data[i]     = avg; // red
      data[i + 1] = avg; // green
      data[i + 2] = avg; // blue
  }
ctx.putImageData(imgData,0,0);

顏色選擇器：

//創(chuàng)建image對(duì)象
var img = new Image();
img.src = 'haorooms.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//img加載完成后畫到canvas上
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  img.style.display = 'none';
};
//獲取顏色RGBA值的函數(shù)
function pick(event) {
  //layerX和layerY屬性表示Canvas內(nèi)部坐標(biāo)系中的坐標(biāo)
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1);
  var data = pixel.data;
  console.log(data);
  //獲取到RGBA值的字符串
  var rgba = 'rgba(' + data[0] + ',' + data[1] +
             ',' + data[2] + ',' + (data[3] / 255) + ')';
  //自定義操作例如將字符串顯示在某dom上或者return返回值等
  //
}
//為canvas綁定mousemove事件
canvas.addEventListener('mousemove', pick);

這篇文章中有對(duì)像素操作的多個(gè)應(yīng)用介紹

canvas和圖片相互轉(zhuǎn)換

//此處image應(yīng)確保加載完成
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
}

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

更新中.......