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