這篇文章將為大家詳細(xì)講解有關(guān)HTML 5中怎么利用canvas對(duì)圖像進(jìn)行處理，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)南木林免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

下面就介紹一個(gè)簡單的例子:

                              
canvas
     是時(shí)候更換瀏覽器了點(diǎn)擊下載firefox       
   圖像的反轉(zhuǎn)   
                                                 
canvas
     是時(shí)候更換瀏覽器了點(diǎn)擊下載firefox       
   圖像的反轉(zhuǎn)   
                                                 
canvas
     是時(shí)候更換瀏覽器了點(diǎn)擊下載firefox       
   圖像的反轉(zhuǎn)   
                

1)html5 的canvas調(diào)用

var canvas1=document.getElementById('canvas1');//獲取canvas元素   var context1=canvas.getContext('2d');//此時(shí)獲取到canvas圖像上下文

2)創(chuàng)建圖像并繪制原始圖像

image=new Image();//創(chuàng)建image對(duì)象   image.src="z.JPG";//image的地址   image.onload=function(){   context1.drawImage(image,0,0);//繪制原始圖像，（0,0）表示圖像的左上角位與canvas畫布的位置   }

3)獲取圖像的rgba矩陣并操作

var imagedata=context1.getImageData(0,0,image.width,image.height);   //getImageData(x1,y1,x2,y2)獲取圖像的rgba矩陣，其中截取圖像的大小為(x1,y1)-(x2,y2) 的矩陣   var imagedata1=context2.createImageData(image.width,image.height);   //createImageData(x,y):創(chuàng)建寬高分別為x,y的圖像矩陣      for(var j=0;j
下面就細(xì)說下html5圖像的儲(chǔ)存形式：
矩陣中每個(gè)像素點(diǎn)有四個(gè)通道分別儲(chǔ)存r/g/b/a的值。（四個(gè)值按序連續(xù)的排列，為一維矩陣）
所以每兩個(gè)像素間相隔4位，計(jì)算時(shí)
k=4*(image.width*j+i);為像素點(diǎn)（i,j）的位置，
imagedata1.data[k+0]表示R分量，依次類推，其中剩下的分別為G、B分量還有透明度。
關(guān)于HTML 5中怎么利用canvas對(duì)圖像進(jìn)行處理就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
            
            
                        

            當(dāng)前名稱：HTML5中怎么利用canvas對(duì)圖像進(jìn)行處理            

            本文鏈接：http://www.xueling.net.cn/article/gecjeh.html