這篇文章主要介紹“html5 Canvas怎么實(shí)現(xiàn)填充和漸變”，在日常操作中，相信很多人在html5 Canvas怎么實(shí)現(xiàn)填充和漸變問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5 Canvas怎么實(shí)現(xiàn)填充和漸變”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),全椒企業(yè)網(wǎng)站建設(shè),全椒品牌網(wǎng)站建設(shè),網(wǎng)站定制,全椒網(wǎng)站建設(shè)報(bào)價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,全椒網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

Canvas充填漸變色

    在Canvas中，漸變色一樣分為兩種，即線性漸變和徑向漸變，而且建創(chuàng)他們的方法也是立獨(dú)的。我們先看如何建創(chuàng)線性漸變。

    建創(chuàng)線性漸變=createLinearGradient——看，仍然很直接的單詞。他的法語如下：

    createLinearGradient

    (x1,y1,x2,y2)

    有4個數(shù)參呢！看起來好龐雜，其實(shí)這個挺單簡的，因?yàn)槲覀兒竺嬉颜f了，平面天下里的一個點(diǎn)是由x標(biāo)坐和y標(biāo)坐定確的。所以，x1,y1就是表現(xiàn)線性漸變的出發(fā)點(diǎn)標(biāo)坐，x2,y2就表現(xiàn)終點(diǎn)標(biāo)坐。

    這樣做的處好很明顯，如果我們想建創(chuàng)一個斜著的線性漸變，很便利。但我們先建創(chuàng)一個水平的線性漸變嘗嘗吧。

var linear = ctx.createLinearGradient(100,100,200,100);

漸變似乎建創(chuàng)了，那么我們可以充填了嗎？————這個漸變是空的，沒有顏色。

    往漸變條里加顏色的方法是addColorStop(位置,顏色).但要注意了，這個addColorStop不是加在畫筆上，而是加在后面的那個存保漸變的變量上，我這里是linear.

var linear = ctx.createLinearGradient(100,100,200,100);
linear.addColorStop(0,'#fff');
linear.addColorStop(0.5,'#f0f');
linear.addColorStop(1,'#333');

我這里用了3個addColorStop，即為漸變條加上了3個顏色。

    注意：addColorStop的位置數(shù)參，永遠(yuǎn)是介于0-1之間的數(shù)字,可是以兩位數(shù)小，表現(xiàn)百分比。他沒法接收’3px’這樣的數(shù)參。

    這時候，我們就能夠充填漸變色了，但我們必須先把義定好的漸變賦給fillStyle.

var linear = ctx.createLinearGradient(100,100,200,100);
linear.addColorStop(0,'#fff');
linear.addColorStop(0.5,'#f0f');
linear.addColorStop(1,'#333');
ctx.fillStyle = linear; //把漸變賦給充填式樣ctx.fillRect(100,100,100,100);
ctx.stroke();//無用

注意，fillRect與strokeRect畫出的都是立獨(dú)的路徑，如上面的碼代，在fillRect后調(diào)用描邊，不并會把剛剛畫出的矩形描邊，strokeRect同理。

    經(jīng)過測試后，現(xiàn)發(fā)了一個很蛋疼的題問，就是線性漸變的標(biāo)坐是相對全部Canvas范圍而言的。比如我這里，我的線性漸變出發(fā)點(diǎn)就是100,100，如果我畫了一個矩形在0,0的位置，用這個漸變來充填，就會現(xiàn)發(fā)沒有充填——因?yàn)槲业臐u變的范圍根本就超過了矩形的范圍。

    這真是一個坑爹的設(shè)定。

    發(fā)問：漸變出發(fā)點(diǎn)之前與漸變終點(diǎn)后之還會充填顏色嗎？

    會。出發(fā)點(diǎn)之前的顏色就是出發(fā)點(diǎn)色，終點(diǎn)之后的顏色一直是終點(diǎn)色。

    如何終止終點(diǎn)色，你可以在結(jié)束色后之再填一個透明的結(jié)束色。如：

linear.addColorStop(0.99,'#333');
linear.addColorStop(1,'rgba(51,51,51,0)');

依照后面的劃計(jì)，我再建一個傾斜的線性漸變嘗嘗。只要需改createLinearGradient的數(shù)參可即.

var linear = ctx.createLinearGradient(100,100,200,200);

果效如圖：

    每日一道理
水仙亭亭玉立，蘭花典雅幽香，牡丹雍容華貴，梨花潔白無暇……美麗的花朵總能得到世人的羨慕與贊嘆，殊不知，它從一粒小小的種子到最后開花，要?dú)v經(jīng)無數(shù)的艱辛與坎坷！我們的成長也是如此。只有做辛勤的“織夢者”，我們的夢想才會成真！

    

    然后，讓我們來嘗嘗徑向漸變（圓形漸變）。與createLinearGradient相似，建創(chuàng)徑向漸變的方法是：createRadialGradient,但他們的數(shù)參可大不雷同：

    createRadialGradient(x1,y1,r1,x2,y2,r2)

    其中的x1,y1,x2,y2舊依表現(xiàn)出發(fā)點(diǎn)和終點(diǎn)，不過這里的出發(fā)點(diǎn)和終點(diǎn)都是一個圓，而x,y則是圓心的標(biāo)坐。所以，r1與r2分別是出發(fā)點(diǎn)圓的半徑和終點(diǎn)圓的半徑。如圖：

    

    在我的印象中，貌似徑向漸變就是一個圓，圓心就是出發(fā)點(diǎn)，圓的半徑就是終點(diǎn)。但canvas里頭的徑向漸變竟然弄的不一樣了，出發(fā)點(diǎn)一個圓，終點(diǎn)一個圓，和我的解理有差距。

    我們從最單簡的做起。首先，做一個很正規(guī)的徑向漸變，即漸變圓形的圓心就是漸變的出發(fā)點(diǎn)。由于正規(guī)的徑向漸變，漸變中央即圓心，所以我們應(yīng)當(dāng)盡量免避生發(fā)偏斜。那么，我們把終點(diǎn)圓的圓心與出發(fā)點(diǎn)圓的圓心重合吧？

var radial = ctx.createRadialGradient(55,55,10,55,55,55); //重合的圓心標(biāo)坐radial.addColorStop(0,'#fff');
radial.addColorStop(0.5,'#ff0');
radial.addColorStop(0.9,'#555');
radial.addColorStop(1,'#f00');

這里我設(shè)置的徑向漸變出發(fā)點(diǎn)圓和終點(diǎn)圓的圓心標(biāo)坐雷同，而出發(fā)點(diǎn)圓半徑為10，終點(diǎn)圓半徑為55.最后畫出的徑向漸變范圍是一個寬高110的圓形，明說漸變范圍以終點(diǎn)圓的范圍為準(zhǔn)。

    （可以看到終點(diǎn)圓范圍外之還是有顏色，這個顏色就是終點(diǎn)色，但是，如果你妄圖用使radial.addColorStop(1.5,’#0f0′);這樣來義定漸變范圍外之的顏色，你還是會收到一個誤錯）.

    那么，出發(fā)點(diǎn)圓的半徑有什么用呢？——原來畸形的徑向漸變的中央（姑且稱之為“變心”…吧）只是一個點(diǎn)，應(yīng)不該是一個圓的。其實(shí)我們沒錯，這個出發(fā)點(diǎn)圓就相當(dāng)于一個圓點(diǎn)而已,只是可能比較大。

    讓我們把出發(fā)點(diǎn)圓的半徑變得很大，近接于終點(diǎn)圓的半徑：

var radial = ctx.createRadialGradient(55,55,50,55,55,55); //很近接

其他的colorStop都變不，然后圖形就變成了這個模樣。

    

    也就是說，canvas中徑向漸變的出發(fā)點(diǎn)色，是從出發(fā)點(diǎn)圓的范圍外之繪制的，而出發(fā)點(diǎn)圓的全部顏色都是出發(fā)點(diǎn)色。

    我們把出發(fā)點(diǎn)圓的半徑設(shè)為0，那徑向漸變的“變心”，就真的是一個點(diǎn)了。

    大部份時候我們都不要需很正規(guī)的徑向漸變，反而希望他的變心是偏移的，相似下圖：

    

    這個時候，canvas徑向漸變兩個圓的優(yōu)勢就出來了，只要我們出發(fā)點(diǎn)圓與終點(diǎn)圓的圓心不重合，那變心也就會偏移：

var radial = ctx.createRadialGradient(75,75,0,55,55,55);

但此時的漸變范圍仍然是終點(diǎn)圓的范圍哈。

    很多人生成就有一種弄破壞的理心，比如這里，終點(diǎn)圓的半徑總比出發(fā)點(diǎn)圓大，但如果把他們反過來會怎么樣呢？

var radial = ctx.createRadialGradient(75,75,55,55,55,0);

經(jīng)測試，這樣不會報(bào)錯，只是來原的從內(nèi)到外的漸變反過來變成了從外到內(nèi)的漸變了。這是個好用法。

到此，關(guān)于“html5 Canvas怎么實(shí)現(xiàn)填充和漸變”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)頁標(biāo)題：html5Canvas怎么實(shí)現(xiàn)填充和漸變-創(chuàng)新互聯(lián)
本文URL：http://jinyejixie.com/article10/dcjpgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站營銷、網(wǎng)站建設(shè)、建站公司、用戶體驗(yàn)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)