用HTML5中canvas實(shí)現(xiàn)漸變文字效果的方法?這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
成都創(chuàng)新互聯(lián)長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為南部企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、做網(wǎng)站,南部網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
用HTML5中的canvas 實(shí)現(xiàn)漸變文字效果,需要用到的語法及參數(shù)設(shè)置如下,不清楚的小伙伴可以看看。
1、fillText( )
語法:context.fillText(text,x,y,maxWidth)
text表示需要在畫布上輸出的文本
x表示開始繪制文本的X軸坐標(biāo)
y表示開始繪制文本的 Y軸坐標(biāo)
maxWidth 表示允許的最大文本寬度,單位是像素,是一個(gè)可選值。
2、createLinearGradient( )
語法:context.createLinearGradient(x0,y0,x1,y1)
x0 表示漸變開始點(diǎn)的X軸坐標(biāo)
y0 表示漸變開始點(diǎn)的Y軸坐標(biāo)
x1 表示漸變結(jié)束點(diǎn)的X軸坐標(biāo)
y1 表示漸變結(jié)束點(diǎn)的Y軸坐標(biāo)
舉:1:制作一個(gè)普通文字(無顏色漸變),代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas> </body> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="20px Georgia"; ctx.fillText("學(xué)習(xí)使我快樂",10,50); </script> </html>
效果圖如圖所示:
舉例2:制作一個(gè)漸變文字,具體代碼如下:
ctx.font="30px Verdana"; // Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","orange"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.fillStyle=gradient; ctx.fillText("have a nice day ",10,100);
效果圖:
制作漸變文字時(shí),首先要用createLinearGradient( )創(chuàng)建一個(gè)漸變,然后用fillStyle將漸變運(yùn)用于文字上。
感謝各位的閱讀!看完上述內(nèi)容,你們對用HTML5中canvas實(shí)現(xiàn)漸變文字效果的方法大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目:用HTML5中canvas實(shí)現(xiàn)漸變文字效果的方法
URL標(biāo)題:http://muchs.cn/article24/pdjjce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、做網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)建站、搜索引擎優(yōu)化、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)