Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
教程的效果基本上都是用圖層樣式來完成。大致過程:先設(shè)定好文字,文字選擇類似液體的字體,然后給文字添加樣式做出水滴質(zhì)感,再在文字周圍加上一些小水滴即可
完成效果
一,選取“文件/創(chuàng)建”菜單,打開“創(chuàng)建”或Ctrl+N對話框 名稱為:液體字體做,寬度:為800像素, 高度:為600像素, “分辨率”為72 , “模式”為RGB色彩的文檔,見下圖1
二,在圖層控制面版擊創(chuàng)建圖層按鈕,創(chuàng)建一圖層一,選取工具箱漸變工具(快捷鍵G),在工具選項(xiàng)欄中設(shè)定為線性漸變,之后點(diǎn)按可編輯漸變,彈出漸變編輯器。雙擊見下圖2中的A處,設(shè)定顏色RGB分別為25二,25二,232。再雙擊P2中的B處,設(shè)定顏色RGB分別為2二十五,2十九,184。繼續(xù)按鍵盤Shift不放結(jié)合鼠標(biāo)從上到下拖下,給漸變效果,按鍵盤快捷鍵Ctrl+D取消選區(qū),見下圖2。完成圖見下圖3
三,在工具箱中選取橫排文字工具 ,在畫面中用鼠標(biāo)點(diǎn)擊后,出現(xiàn)一鍵入文字光標(biāo),在光標(biāo)后鍵入“pop”,在工具選項(xiàng)欄中設(shè)定字體為“CroissantD”,設(shè)定字體大小為“238.46點(diǎn)”,設(shè)定消除鋸齒為“銳利”,設(shè)定字體色彩為白色,單擊新建文字變形,彈出變形文字對話框,設(shè)定樣式為:扇形,勾選水平,彎曲為:-10%,水平扭曲為:0%,垂直扭曲為:0%,見下圖4
四,雙點(diǎn)擊pop圖層進(jìn)入到圖層樣式,分別勾選投影、內(nèi)陰影、外發(fā)光、內(nèi)發(fā)光、斜面與浮雕、色彩疊加、光澤、描邊選項(xiàng)
參數(shù)設(shè)定及此時效果圖如下
五,在圖層樣板中,選取POP圖層,拷貝一pop圖層拷貝,雙點(diǎn)擊pop圖層進(jìn)入到圖層樣式,分別勾選投影、內(nèi)陰影、斜面與浮雕選項(xiàng)。見下圖16
詳細(xì)參數(shù)設(shè)定及此時效果圖如下
六,新建新圖層按鈕,在工具箱中選取橢圓選項(xiàng)框工具,繼續(xù)在工作區(qū)拉出一橢圓選項(xiàng)框工具外形,設(shè)定前景為白色,繼續(xù)按鍵盤快捷鍵Alt+Delete填充,并按鍵盤Ctrl+D取消,并雙點(diǎn)擊圖層進(jìn)入到圖層樣式,分別勾選投影、內(nèi)陰影、內(nèi)發(fā)光、斜面與浮雕、光澤選項(xiàng),見下圖21
詳細(xì)參數(shù)設(shè)定見下圖
斷重復(fù)拷貝并調(diào)節(jié)大小和地方,處理完成效果圖
==============================
公眾號:春樹鎮(zhèn)
研究討論:互聯(lián)網(wǎng)技術(shù),php開發(fā),網(wǎng)站建議,app開發(fā),html5開發(fā),設(shè)計,小說,電影。
擊上方藍(lán)字關(guān)注“小鄭搞碼事”,每天都能學(xué)到知識,搞懂一個問題!
Canvas是HTML5提供的新標(biāo)簽,通過JavaScript可以在Canvas元素上繪制圖片并實(shí)現(xiàn)動畫效果,今天展示一下Canvas繪制一個簡單餅圖的基本過程。
實(shí)現(xiàn)上面圖中的餅圖效果,首先在HTML引入Canvas標(biāo)簽,代碼如下:
1、在JavaScript文件,創(chuàng)建PieChart類,并在其構(gòu)造函數(shù)中獲取Canvas的Context環(huán)境。
2、添加PieChart類原型方法load用于載入餅圖所使用的數(shù)據(jù),并計算餅圖的數(shù)據(jù)總量,用于之后渲染餅圖時分配每個數(shù)據(jù)所對應(yīng)的扇形比例。
3、添加PieChart類原型方法render用于對餅圖進(jìn)行渲染,_generateLegend內(nèi)部函數(shù)用于創(chuàng)建餅圖對應(yīng)的圖例,當(dāng)存在legend參數(shù)調(diào)用_generateLegend生成餅圖圖例。
4、最后,引入需要繪制的數(shù)據(jù)創(chuàng)建餅圖對象即可完成餅圖繪制。
總結(jié)一下:
在目前來看在移動端利用2d放射變換來實(shí)現(xiàn)的動畫比較實(shí)惠的還是canvas 2d了。在大部分機(jī)型上canvas都能獲得更好的渲染性能(在硬件加速情況下,瀏覽器會將繪圖命令切換成gpu硬件來執(zhí)行),并且現(xiàn)在的硬件加速支持程度也比較好。所以如果需要運(yùn)動的物體多的話建議用canvas。
注:需要源代碼運(yùn)行的可以私信喲!!
九銀十求職季悄然來臨,有很多應(yīng)屆的小伙伴都在討論秋招面試如何準(zhǔn)備,也有很多想要跳槽的小伙伴摩拳擦掌,其中有很多人為了能抓住機(jī)會去盲目并大量頻繁的面試,其實(shí)這么做沒有意義,面試的目的不是找到工作,拿到offer,而是找到好工作,為此,我整理了一下前端面試題合集,現(xiàn)在就來大致的梳理一下前端面試體系。
在說前端面試體系之前,先來看一下之前整理的前端知識體系圖(可能不太完整),這只是一個基礎(chǔ)版的前端知識體系圖,適合剛?cè)腴T前端的小伙伴參考,大佬勿噴:
常考的HTML面試題:
下圖對HTML面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
常考的CSS面試題:
一、CSS基礎(chǔ)
二、頁面布局
三、定位與浮動
四、場景應(yīng)用
下圖對CSS面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
一、數(shù)據(jù)類型
二、ES6
三、JavaScript基礎(chǔ)
四、原型與原型鏈
五、執(zhí)行上下文/作用域鏈/閉包
六、this/call/apply/bind
七、異步編程
八、面向?qū)ο?/strong>
九、垃圾回收與內(nèi)存泄漏
下圖對JavaScript面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
一、Vue 基礎(chǔ)
二、生命周期
三、組件通信
四、路由
五、Vuex
七、虛擬DOM
下圖對Vue面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
一、組件基礎(chǔ)
二、數(shù)據(jù)管理
三、生命周期
四、組件通信
五、路由
六、Redux
七、Hooks
八、虛擬DOM
九、其他
下圖對React面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
一、瀏覽器安全
二、進(jìn)程與線程
三、瀏覽器緩存
四、瀏覽器組成
六、瀏覽器本地存儲
七、瀏覽器同源策略
八、瀏覽器事件機(jī)制
九、瀏覽器垃圾回收機(jī)制
下圖對瀏覽器原理面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
一、HTTP協(xié)議
二、HTTPS協(xié)議
三、HTTP狀態(tài)碼
四、DNS協(xié)議介紹
五、網(wǎng)絡(luò)模型
六、TCP與UDP
七、WebSocket
下圖對計算機(jī)網(wǎng)絡(luò)面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
一、CDN
二、懶加載
三、回流與重繪
四、節(jié)流與防抖
五、圖片優(yōu)化
六、Webpack優(yōu)化
下圖對前端性能優(yōu)化面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
一、JavaScript 基礎(chǔ)
二、數(shù)據(jù)處理
三、場景應(yīng)用
下圖對手寫代碼面試題的考察頻率進(jìn)行了大致的區(qū)分,可以選擇性的學(xué)習(xí):
代碼輸出結(jié)果是面試中常考的題目,一段代碼中可能涉及到很多的知識點(diǎn),這就考察到了應(yīng)聘者的基礎(chǔ)能力。在前端面試中,常考的代碼輸出問題主要涉及到以下知識點(diǎn):異步編程、事件循環(huán)、this指向、作用域、變量提升、閉包、原型、繼承等。
如果這一篇文章中的面試題都能搞懂了,那面試中的代碼輸出結(jié)果問題基本都很容易就解決了。
一、Git
二、Webpack
三、其他
注: 關(guān)于前端工程相關(guān)的面試題,由于個人還在整理中,還不是很全面。
除了上面給出的這些類別的面試題,其實(shí)還有很多,比如數(shù)據(jù)結(jié)構(gòu)與算法,前端業(yè)務(wù)實(shí)現(xiàn)等。關(guān)于數(shù)據(jù)結(jié)構(gòu)與算法,主要考察方向就是LeetCode題目,可以參考一個搬磚的胖子大佬的codeTop來針對性的刷題。下面只給出幾個業(yè)務(wù)實(shí)現(xiàn)的問題,大家可以參考:
最后,這篇文章只給出了前端面試中經(jīng)常考察到的“八股文”,基本沒有涉及到項(xiàng)目經(jīng)歷相關(guān)的問題, 只能根據(jù)自己的實(shí)際情況去作答了。整理不易,如果覺得有用就點(diǎn)個贊吧!
原文鏈接:https://juejin.cn/post/6996841019094335519
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。