pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML5高級編程之像素處理及粒子效果

你可以像處理flash的像素一樣處理HTML5中的canvas,這聽起來是不是很有趣?如果你有興趣,那么請跟著我一起來看一下這個好玩兒的小功能。,HTML5中國,中國最大的HTML5中文門戶。
       HTML5中的像素處理,需要用到getImageData和putImageData兩個函數,先用getImageData復制canvas畫布中的像素數據,然后對獲取的像素數據進行處理,最后再通過putImageData將處理完的數據粘貼到canvas畫布。我們不妨把中間處理像素的過程稱作像素的批處理,由于像素的復制和粘貼是兩個比較費時的過程,為了更高效的對像素進行處理,我們應該在一次批處理過程中盡可能處理更多的像素數據,來減少像素的復制和粘貼這兩個操作。

        這聽起來似乎是一個相當麻煩的過程,可能有些朋友光是看到上面的幾句話估計就已經開始不耐煩了,其實我也是這么認為的,所以我把這一麻煩的過程封裝到了lufylegend引擎中的LBitmapData類中,你可以像處理flash的像素一樣處理HTML5中的canvas,這聽起來是不是很有趣?如果你有興趣,那么請跟著我一起來看一下這個好玩兒的小功能。

        首先,來認識一下LBitmapData,它通常是用來保存Image對象的,具體用法我就不多說了,大家可以看一下API文檔。這里我主要介紹一下如何用它來批量處理像素。

        下面是LBitmapData中的兩個函數
函數功能
getPixel(x,y,colorType)返回一個表示 BitmapData 對象中在某個特定點 (x, y) 處的 RGB 像素值的數組。其中colorType為需要獲取的像素數據的格式,默認為像素數組,當設置成字符串"number"的時候,返回number型的像素
setPixel(x,y,data)設置 LBitmapData 對象的單個像素。其中data為像素值(支持像素數組,#FF0000,0xFF000等三種格式)

上面這兩個函數是獲取和設置單個像素,當我們需要一次性獲取或設置一個區域的像素的時候,對應的兩個函數如下

函數功能
getPixels(rect)返回一組表示 BitmapData 對象中在某個特定區域的 RGB 像素值的數組。其中rect為LRectangle對象,是一個矩形。
setPixels(rect, data)將像素數據數組轉換粘貼到指定的矩形區域。其中data為像素值(支持像素數組,#FF0000,0xFF000等三種格式)

我們先來準備一張圖片,比如下面鄙人這張帥帥的頭像。

  1. bitmapData = new LBitmapData(imglist["face"]);  
  2. bitmapData.lock();  
  3. var img = bitmapData.getPixels(new LRectangle(75,50,100,100));  

        有時候我們需要對LBitmapData進行多次像素的復制和粘貼操作,這個時候可以使用lock函數,它可以將像素數組緩存起來,在這個過程中,所做的所有的像素操作都是對這個緩存數組進行操作,當操作完畢后,調用相應的unlock函數,將操作完的像素數據粘貼回LBitmapData中。

        比如下面這樣,我們將復制完的數組中的一部分,分四次粘貼到另外一個LBitmapData的四個不同的位置上。

  1. bitmapData2 = new LBitmapData(null,0,0,500,400,LBitmapData.DATA_CANVAS);  
  2. bitmapData2.lock();  
  3. bitmapData2.setPixels(new LRectangle(50,30,50,50),img);  
  4. bitmapData2.setPixels(new LRectangle(100,30,50,50),img);  
  5. bitmapData2.setPixels(new LRectangle(150,30,50,50),img);  
  6. bitmapData2.setPixels(new LRectangle(200,30,50,50),img);  
  7. bitmapData2.unlock();  

       上面的代碼,首先創建了一個空的LBitrmapData對象,最后一個參數是lufylegend-1.8.8版中的新功能,將LBitrmapData對象中保存的數據轉換為canvas對象,這樣可以提高像素操作的效率。

        執行代碼效果如下

       當然,你也可以對這些像素做一些處理,比如下面這樣

  1. bitmapData2.lock();  
  2. var rect = new LRectangle(50,100,100,100);  
  3. var rect1 = new LRectangle(150,100,100,100);  
  4. for(var y=0;y
  5.     for(var x=0;x
  6.         var i = y*4*100+x*4;  
  7.         bitmapData2.setPixel(rect.x+rect.width-x,y+rect.y,[img.data[i],img.data[i+1],img.data[i+2],img.data[i+3]]);  
  8.     }  
  9. }  
  10. for(var y=0;y
  11.     for(var x=0;x
  12.         var i = y*4*100+x*4;  
  13.         bitmapData2.setPixel(x+rect1.x,y+rect1.y,[img.data[i],img.data[i+1],img.data[i+2],img.data[i+3]]);  
  14.     }  
  15. }  
  16. bitmapData2.unlock();  


       效果如下

      可以看到,我們成功的通過處理像素,將圖片翻轉了過來。

       當然圖片翻轉不需要這么麻煩,在lufylegend.js引擎中,你只需要將對象的屬性scaleX設置為-1就可以實現圖片的翻轉。這里我們主要是為了說明像素的處理很靈活而已。

       好了,有了上面的介紹,我們可以用這些API來制作一個酷酷的粒子效果,效果如下。

首先,我們先在畫布上加一個文本

  1. var labelText = new LTextField();  
  2. labelText.color = "#000000";  
  3. labelText.weight = "bolder";  
  4. labelText.text = getParameter("k");  
  5. if(!labelText.text)labelText.text="lufylegend.js";  
  6. labelText.size = 50;  
  7. var w = labelText.getWidth()*1.1;  
  8. var h = labelText.size*1.5;  
  9. labelText.width = w;  
  10. labelText.setWordWrap(true,h);  
  11. labelText.x = (LGlobal.width - w)*0.5;  
  12. labelText.y = (LGlobal.height - h)*0.5;  
  13.   
  14. backLayer = new LSprite();  
  15. addChild(backLayer);  
  16. backLayer.addChild(labelText);  


效果如下

上面唯一需要解釋的是下面幾行

  1. var w = labelText.getWidth()*1.1;  
  2. var h = labelText.size*1.5;  
  3. labelText.width = w;  
  4. labelText.setWordWrap(true,h);  

       其實只需要用getWidth()和getHeight()就能獲取文本的高和寬,但是因為canvas中沒有獲取文本高度的函數,所以引擎中用了一個不太準確的方式來獲取(當然,這一點在引擎下次更新中會得到完美的解決),本次開發,所使用的文本高度和寬度都必須不小于文本的原始大小,所以,我給文本重新設定了一下略大的高度和寬度。
      接下來,我們利用LBitmapData對象的draw函數,把這個文本轉換為LBitmapData對象,為什么要轉換成LBitmapData對象?請接著往下看,一會兒就知道了。


  1. bitmapData = new LBitmapData("#000000",0,0,LGlobal.width,LGlobal.height,LBitmapData.DATA_CANVAS);  
  2. bitmapData.draw(backLayer);  

      上面的處理其實都是鋪墊,不是用來真正顯示的,下面再來創建一個LBitmapData空對象,并通過LBitmap將其繪制到canvas畫布上。

  1. snowBack = new LBitmapData(null,0,0,LGlobal.width,LGlobal.height,LBitmapData.DATA_CANVAS);  
  2. var bitmap = new LBitmap(snowBack);  
  3. backLayer.addChild(bitmap);

重點來了,我現在需要對snowBack對象的像素不斷的進行處理,這個簡單,我們通過ENTER_FRAME來實現

backLayer.addEventListener(LEvent.ENTER_FRAME,run);

       上面的效果圖,可以看到,我需要往畫布上不斷的添加白色的粒子,就和下雪一樣。但是這些白色粒子,不能直接畫到畫布上,我們需要先將這些粒子添加到一個緩存數組中,然后來批量的操作它們,下面的函數用來生成一個粒子,參數分別是(x坐標,y坐標,下降加速度,x軸方向速度,y軸方向速度)。

  1. function particle(px,py,ps,pvx,pvy){  
  2.     if(typeof ps == UNDEFINED)ps = 1;  
  3.     if(typeof pvx == UNDEFINED)pvx = 0;  
  4.     if(typeof pvy == UNDEFINED)pvy = 0;  
  5.     _snow.push({x:px,y:py,s:ps,vx:pvx,vy:pvy});  
  6. }  

       我們通過不斷的調用這個函數,來向畫布中不斷的添加白色粒子,添加到畫布上的粒子,會做向下類似于自由落體的加速運動,在運動過程中會遇到阻礙,就是前面在畫面上顯示過的文字,當粒子碰到文字的時候,受到阻力,運動變得緩慢,這樣粒子在有文字的地方不斷的受到文字的阻礙,大量的白色粒子就會聚集到文字處,就形成了上面的粒子效果。

      下面的函數用來檢驗指定坐標處是否處在文字上

  1. function checkPixel(x,y){  
  2.     var pixel = bitmapData.getPixel(x,y);  
  3.     for(var i=0;i
  4.         if(pixel[i])return true;  
  5.     }  
  6.     return false;  
  7. }  

      原理就是獲取坐標點像素,然后檢驗像素點的顏色,現在知道為什么要把前面的文字轉換成LBitmapData對象了吧,就是為了要獲取指定點的像素值。

      

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: Brotu | 关注AI,Web3.0,VR/AR,GPT,元宇宙区块链数字产业 | 阿尔法-MDR2000无转子硫化仪-STM566 SATRA拉力试验机-青岛阿尔法仪器有限公司 | 合肥白癜风医院_[治疗白癜风]哪家好_合肥北大白癜风医院 | 大行程影像测量仪-探针型影像测量仪-增强型影像测量仪|首丰百科 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 温泉机设备|温泉小镇规划设计|碳酸泉设备 - 大连连邦温泉科技 | 深圳公司注册-工商注册公司-千百顺代理记账公司 | 船用泵,船用离心泵,船用喷射泵,泰州隆华船舶设备有限公司 | 长沙印刷厂-包装印刷-画册印刷厂家-湖南省日大彩色印务有限公司 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 超声波清洗机_大型超声波清洗机_工业超声波清洗设备-洁盟清洗设备 | 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 玻璃钢型材-玻璃钢风管-玻璃钢管道,生产厂家-[江苏欧升玻璃钢制造有限公司] | 胶辊硫化罐_胶鞋硫化罐_硫化罐厂家-山东鑫泰鑫智能装备有限公司 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | ptc_浴霸_大巴_干衣机_呼吸机_毛巾架_电动车加热器-上海帕克 | RTO换向阀_VOC高温阀门_加热炉切断阀_双偏心软密封蝶阀_煤气蝶阀_提升阀-湖北霍科德阀门有限公司 | 无线讲解器-导游讲解器-自助讲解器-分区讲解系统 品牌生产厂家[鹰米讲解-合肥市徽马信息科技有限公司] | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | 环压强度试验机-拉链拉力试验机-上海倾技仪器仪表科技有限公司 | 杭州代理记账多少钱-注册公司代办-公司注销流程及费用-杭州福道财务管理咨询有限公司 | 中红外QCL激光器-其他连续-半导体连续激光器-筱晓光子 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 生物风-销售载体,基因,质粒,ATCC细胞,ATCC菌株等,欢迎购买-百风生物 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | 泰国专线_泰国物流专线_广州到泰国物流公司-泰廊曼国际 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 蜂窝块状沸石分子筛-吸附脱硫分子筛-萍乡市捷龙环保科技有限公司 | 蓄电池回收,ups电池后备电源回收,铅酸蓄电池回收,机房电源回收-广州益夫铅酸电池回收公司 | 小程序开发公司_APP开发多少钱_软件开发定制_微信小程序制作_客户销售管理软件-济南小溪畅流网络科技有限公司 | 云南成考网_云南成人高考报名网 粤丰硕水性环氧地坪漆-防静电自流平厂家-环保地坪涂料代理 | 清管器,管道清管器,聚氨酯发泡球,清管球 - 承德嘉拓设备 | 报警器_家用防盗报警器_烟雾报警器_燃气报警器_防盗报警系统厂家-深圳市刻锐智能科技有限公司 | 保镖公司-私人保镖-深圳保镖公司【环宇兄弟保镖】 | 99文库_实习生实用的范文资料文库站| 3d打印服务,3d打印汽车,三维扫描,硅胶复模,手板,快速模具,深圳市精速三维打印科技有限公司 | 不锈钢反应釜,不锈钢反应釜厂家-价格-威海鑫泰化工机械有限公司 不干胶标签-不干胶贴纸-不干胶标签定制-不干胶标签印刷厂-弗雷曼纸业(苏州)有限公司 | 无线讲解器-导游讲解器-自助讲解器-分区讲解系统 品牌生产厂家[鹰米讲解-合肥市徽马信息科技有限公司] | Copeland/谷轮压缩机,谷轮半封闭压缩机,谷轮涡旋压缩机,型号规格,技术参数,尺寸图片,价格经销商 CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 礼至家居-全屋定制家具_一站式全屋整装_免费量房设计报价 | 回转支承-转盘轴承-回转驱动生产厂家-洛阳隆达轴承有限公司 | 双段式高压鼓风机-雕刻机用真空泵-绍兴天晨机械有限公司 | 西安展台设计搭建_西安活动策划公司_西安会议会场布置_西安展厅设计西安旭阳展览展示 |