国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

canvas學(xué)習(xí)和濾鏡實(shí)現(xiàn)

gclove / 749人閱讀

摘要：最近學(xué)習(xí)了中的重頭戲。其繁多，這次主要學(xué)習(xí)常用的，并且完成以下兩個(gè)代碼實(shí)現(xiàn)去色濾鏡實(shí)現(xiàn)負(fù)色反色濾鏡歡迎入群。其中，和是圓心坐標(biāo)，是半徑。而和的單位是弧度制。什么是更多濾鏡實(shí)現(xiàn)去色效果去色效果相當(dāng)于就是老舊相機(jī)拍出來(lái)的黑白照片。

最近學(xué)習(xí)了 HTML5 中的重頭戲--canvas。利用 canvas，前端人員可以很輕松地、進(jìn)行圖像處理。其 API 繁多，這次主要學(xué)習(xí)常用的 API，并且完成以下兩個(gè)代碼：



實(shí)現(xiàn)去色濾鏡


實(shí)現(xiàn)負(fù)色(反色)濾鏡

歡迎入群：_857989948_ 。IT 技術(shù)深度交流和分享，涉及方面包括但不限于：網(wǎng)站制作、運(yùn)營(yíng)、UI 設(shè)計(jì)、算法分析、大數(shù)據(jù)、人工智能等。本群主打有深度、有態(tài)度的技術(shù)交流，歡迎熱衷記錄知識(shí)的您的加入。

1 了解 canvas？ 1.1 什么是 canvas？

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

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

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

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

大多數(shù) Canvas 繪圖 API 都沒(méi)有定義在 元素本身上，而是定義在通過(guò)畫(huà)布的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); // 開(kāi)始坐標(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)



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



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

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

3.2 繪制圖像

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

如下圖所示，圖片被畫(huà)入了 canvas：

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

什么是 RGBA？

更多濾鏡實(shí)現(xiàn)

4.1 去色效果

去色效果相當(dāng)于就是老舊相機(jī)拍出來(lái)的黑白照片。人們根據(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

代碼如下：

效果圖如下：

本篇文章來(lái)自董沅鑫的個(gè)人網(wǎng)站，引用、轉(zhuǎn)載請(qǐng)指明出處。

查看更多知識(shí)，或者技術(shù)交流：請(qǐng)?jiān)L問(wèn)godbmw.com

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108383.html

相關(guān)文章

  • canvas學(xué)習(xí)和濾鏡實(shí)現(xiàn)

    摘要：最近學(xué)習(xí)了中的重頭戲。其繁多，這次主要學(xué)習(xí)常用的，并且完成以下兩個(gè)代碼實(shí)現(xiàn)去色濾鏡實(shí)現(xiàn)負(fù)色反色濾鏡歡迎入群。其中，和是圓心坐標(biāo)，是半徑。而和的單位是弧度制。什么是更多濾鏡實(shí)現(xiàn)去色效果去色效果去色效果相當(dāng)于就是老舊相機(jī)拍出來(lái)的黑白照片。 最近學(xué)習(xí)了 HTML5 中的重頭戲--canvas。利用 canvas，前端人員可以很輕松地、進(jìn)行圖像處理。其 API 繁多，這次主要學(xué)習(xí)常用的 API，并且...

    cheng10 評(píng)論0 收藏0

  • wx-caman——基于 CamanJS 的微信小程序 Canvas 像素級(jí)濾鏡處理庫(kù)

    摘要：但是由于微信小程序中的組件與元素有較大差異，因此傳統(tǒng)的處理庫(kù)幾乎無(wú)法在小程序中使用。在調(diào)研了一些傳統(tǒng)瀏覽器端的項(xiàng)目后，我發(fā)現(xiàn)的功能比較完善，同時(shí)也比較容易對(duì)微信小程序進(jìn)行適配。由封裝而來(lái)，基于進(jìn)行了重寫(xiě)，并針對(duì)微信小程序進(jìn)行了適配。 做這個(gè)項(xiàng)目的初衷是希望能夠開(kāi)發(fā)一款不依賴服務(wù)端而純通過(guò)客戶端渲染為圖片添加濾鏡的小程序。但是由于微信小程序中的 canvas 組件與 DOM Canvas...

    saucxs 評(píng)論0 收藏0

  • 開(kāi)始學(xué)習(xí) PixiJS

    摘要：它自動(dòng)偵測(cè)使用或者。開(kāi)發(fā)者無(wú)需專門(mén)學(xué)習(xí)就能感受到強(qiáng)大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個(gè)游戲引擎，它的核心本質(zhì)是盡可能快速有效地在屏幕上移動(dòng)物體。可以被處理的圖像被稱作紋理。 PixiJS 介紹 PixiJS 是一個(gè)超快的2D渲染引擎。它自動(dòng)偵測(cè)使用 WebGL 或者 Canvas。開(kāi)發(fā)者無(wú)需專門(mén)學(xué)習(xí) WebGL 就能感受到強(qiáng)大的硬件加速的力量。 Pixi...

    fredshare 評(píng)論0 收藏0

  • 前端圖像處理指南

    摘要：本文會(huì)介紹位圖處理，矢量圖和圖像處理，重點(diǎn)是，并且最后會(huì)附上一個(gè)小應(yīng)用。以上列舉部分，更多備胎在此矢量圖處理講完位圖再說(shuō)矢量圖。矢量圖在繪制圖標(biāo)商業(yè)動(dòng)畫(huà)元素上應(yīng)用非常廣范。 計(jì)算機(jī)圖像處理是一門(mén)很成熟的技術(shù)，任何一門(mén)可操作系統(tǒng)接口的語(yǔ)言都能很輕易的實(shí)現(xiàn)各種處理操作。但是前端限于瀏覽器環(huán)境和接口限制，處理起來(lái)會(huì)有諸多不便，這里所說(shuō)的前端圖像處理，是真的指不借助任何后端服務(wù)純前端實(shí)現(xiàn)的圖像...

    Anshiii 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<