使用canvas怎么實(shí)現(xiàn)一個(gè)濾鏡功能？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出周至免費(fèi)做網(wǎng)站回饋大家。

1 了解 canvas？

1.1 什么是 canvas？

這個(gè) HTML 元素是為了客戶端矢量圖形而設(shè)計(jì)的。它自己沒有行為，但卻把一個(gè)繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

1.2 canvas 和 svg、vml 的區(qū)別？

標(biāo)記和 SVG 以及 VML 之間的一個(gè)重要的不同是， 有一個(gè)基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個(gè) XML 文檔來描述繪圖。

2 canvas 繪圖學(xué)習(xí)

大多數(shù) Canvas 繪圖 API 都沒有定義在 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個(gè)“繪圖環(huán)境”對(duì)象上。而 元素本身默認(rèn)的寬高分別是 300px、150px。

2.1 canvas 繪制矩形

// 處理canvas元素
var c = document.querySelector("#my-canvas");
c.width = 150;
c.height = 70;

// 獲取 指定canvas標(biāo)簽 上的context對(duì)象
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000"; // 顏色
ctx.fillRect(0, 0, 150, 75); // 形狀

2.2 canvas 繪制路徑

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); // 開始坐標(biāo)
ctx.lineTo(200, 100); // 結(jié)束坐標(biāo)
ctx.stroke(); // 立即繪制

2.3 canvas 繪制圓形

對(duì)于 ctx.arc() 這個(gè)接口，5 個(gè)參數(shù)是: (x,y,r,start,stop) 。其中，x 和 y 是圓心坐標(biāo)，r 是半徑。

而 start 和 stop 的單位是 弧度制。不是長(zhǎng)度，也不是 °。

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

2.4 canvas 繪制文字

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

3 canvas 圖像處理學(xué)習(xí)

3.1 常用 API 接口

關(guān)于圖像處理的 API，主要有 4 個(gè)：

繪制圖像： drawImage(img,x,y,width,height) 或 drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

獲取圖像數(shù)據(jù)： getImageData(x,y,width,height)

重寫圖像數(shù)據(jù)： putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

導(dǎo)出圖像： toDataURL([type, encoderOptions])

更詳細(xì)的 API 和參數(shù)說明請(qǐng)看： canvas 圖像處理 API 參數(shù)講解

3.2 繪制圖像

在此些 API 的基礎(chǔ)上，我們就可以在 canvas 元素中繪制我們的圖片。假設(shè)我們圖片是 ./img/photo.jpg 。

如下圖所示，圖片被畫入了 canvas：

4 實(shí)現(xiàn)濾鏡

這里我們主要借用 getImageData 函數(shù)，他返回每個(gè)像素的 RGBA 值。借助圖像處理公式，操作像素進(jìn)行相應(yīng)的、數(shù)學(xué)運(yùn)算即可。

4.1 去色效果

去色效果相當(dāng)于就是老舊相機(jī)拍出來的黑白照片。人們根據(jù)人眼的敏感程度，給出了如下公式：

gray = red * 0.3 + green * 0.59 + blue * 0.11

代碼如下：

效果如下圖所示：

4.2 負(fù)色效果

負(fù)色效果就是用最大值減去當(dāng)前值。而 getImageData 獲得的 RGB 中的數(shù)值理論最大值是：255。所以，公式如下：

new_val = 255 - val

代碼如下：

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。