【HTML5】Canvas繪制簡(jiǎn)單圖片教程
我要評(píng)論獲取Image對(duì)象，new出來(lái)
定義Image對(duì)象的src屬性，參數(shù)：圖片路徑
定義Image對(duì)象的onload方法，調(diào)用context對(duì)象的drawImage()方法，參數(shù)：Image對(duì)象，x坐標(biāo)，y坐標(biāo)
重載方法，調(diào)用context對(duì)象的drawImage()方法，參數(shù)：Image對(duì)象，x坐標(biāo)，y坐標(biāo)，圖像寬度，高度
重載方法，調(diào)用context對(duì)象的drawImage()方法，
參數(shù)：
Image對(duì)象，圖像上x坐標(biāo)，圖像上y坐標(biāo)，矩形寬度，矩形高度，畫在畫布上的x坐標(biāo)，畫在畫布上的y坐標(biāo)，圖像寬度，圖像高度
調(diào)用context對(duì)象的getImageData()方法，得到像素顏色數(shù)組，參數(shù)：x坐標(biāo)，y坐標(biāo)，x寬度，y寬度
調(diào)用context對(duì)象的putImageData ()方法，設(shè)置圖片顏色，參數(shù)：ImageData對(duì)象，x坐標(biāo)，y坐標(biāo)
- var canvas=document.getElementById('myCanvas');
- var context=canvas.getContext("2d");
- //繪制圖片
- var img=new Image();
- img.src="1.jpg";
- img.onload=function(){
- //context.drawImage(img,0,0);
- //context.drawImage(img,0,0,100,100);
- context.drawImage(img,180,160,100,100,0,0,100,100);
- var imagedata=context.getImageData(0,0,100,100);
- for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
- imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;
- imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green
- imagedata.data[i + 2] = 255 - imagedata.data[i + 2];
- }
- context.putImageData(imagedata,0,0);
- }
以上這篇【HTML5】Canvas繪制簡(jiǎn)單圖片教程就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
HTML5實(shí)現(xiàn)的輕量級(jí)繪制SVG輪廓線路徑動(dòng)畫插件特效源碼
是一段實(shí)現(xiàn)了五款輕量級(jí)繪制SVG輪廓線路徑動(dòng)畫效果代碼，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有需要的朋友們可以前來(lái)下載使用2016-05-16html5 實(shí)現(xiàn)客戶端驗(yàn)證上傳文件的大小(簡(jiǎn)單實(shí)例)
下面小編就為大家?guī)?lái)一篇html5 實(shí)現(xiàn)客戶端驗(yàn)證上傳文件的大小(簡(jiǎn)單實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-15
html5基于鼠標(biāo)滾動(dòng)控制植樹生長(zhǎng)動(dòng)畫特效源碼
這是一款html5基于鼠標(biāo)滾動(dòng)控制植樹生長(zhǎng)動(dòng)畫特效源碼，伴隨著鼠標(biāo)滾輪的滾動(dòng)可呈現(xiàn)出樹木生長(zhǎng)的動(dòng)畫效果。整體動(dòng)畫漸變效果流暢自然2016-05-13HTML5實(shí)現(xiàn)頁(yè)面切換激活的PageVisibility API使用初探
這篇文章主要介紹了HTML5實(shí)現(xiàn)頁(yè)面切換激活的PageVisibility API使用初探,PageVisibility可以使我們?cè)谇袚Q瀏覽器tab頁(yè)面時(shí)自動(dòng)停止和播放視頻,需要的朋友可以參考下2016-05-13HTML5的Geolocation地理位置定位API使用教程
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了確定用戶位置的功能,借助這個(gè)特性能夠開發(fā)基于位置信息的應(yīng)用,今天這篇文章就向大家介紹一下HTML5的Geolocation地理2016-05-12HTML5中的強(qiáng)制下載屬性download使用實(shí)例解析
鏈接中加入download屬性可以使用戶將文件下載下來(lái)而不是直接用瀏覽器打開,截止到目前為止對(duì)HTML5提供支持的瀏覽器已經(jīng)對(duì)這個(gè)屬性支持得比較好了,下面我們就來(lái)詳細(xì)看一下HTM2016-05-12- 下面小編就為大家?guī)?lái)一篇HTML5事件方法全部匯總。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧2016-05-12
HTML5全屏響應(yīng)式縮放切換幻燈片代碼是一款切換的時(shí)候當(dāng)前slide會(huì)平滑縮小并移動(dòng)，下一個(gè)slide會(huì)從縮小狀態(tài)逐漸放大并移動(dòng)到屏幕中間，效果不錯(cuò)。需要的朋友前來(lái)下載源碼哦2016-05-10- 下面小編就為大家?guī)?lái)一篇深入理解HTML的FormData對(duì)象。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧，祝大家游戲愉快哦2016-05-17
