Ⅰ 前端如何根據數據畫svg圖
SVG 是一種基於 XML 語法的圖像格式，全稱是可縮放矢量圖（Scalable Vector Graphics）。
其他圖像格式都是基於像素處理的，SVG 則是屬於對圖像的形狀描述，所以它本質上是文本文件，體積較小，且不管放大多少倍都不會失真。
SVG 文件可以直接插入網頁，成為 DOM 的一部分，然後用 JavaScript 和 CSS 進行操作。
Ⅱ 前端可以畫人像輪廓圖嗎
前端可以畫人像輪廓圖，前端可以畫人像輪廓圖步驟如下：
1、使用canvas，算好比例尺；
2、確定上、左位置，確定寬高；
3、圖片預載入時畫圖；
4、精確化處理js的乘除，否則會有出入。
Ⅲ web前端怎麼做圖片不需要文件夾
1、首先打開《web前端》軟體，登錄自己的賬號。
2、其次找到格式界面，找到圖片插入。
3、最後點擊插入便不需要使用文件夾了。
Ⅳ 前端筆記 — canvas
在HTML中添加<canvas>元素，必須設置width跟height屬性
如果瀏覽器不支持canvas元素，就會顯示標簽中間的內容
要在畫布上繪圖，需要取得繪圖上下文，調用getContext('2d')就可以取得canvas的2d上下文
使用toDataURL方法可以導出canvas上繪制的圖像，接受一個參數，圖像的MIME類型格式
常用的屬性控制
矩形是唯一一種可以直接在上下文中繪制的形狀
與矩形有關的方法包括fillRect()、strokeRect()和clearRect()，這三個方法接受4個參數（x, y, width, height）
fillRect()繪制的矩形會填充指定的顏色，顏色通過fillStyle屬性指定
strokeRect()繪制的矩形會使用指定的顏色描邊，描邊顏色通過strokeStyle屬性指定
clearRect()方法用於清除畫布上的矩形區域
要繪制路徑，首選必須調用beginPath()方法，表示開始繪制新路徑，繪制路徑主要有以下方法
調用closePath()可以將路徑的起點與終點連接。路徑完成後，可以使用fill()填充，或者使用stroke()描邊。最後還可以調用clip()，在路徑上創建一個剪切區域
繪制文本主要有兩個方法，fillText()和strokeText()，這個兩個方法接受4個參數：要繪制的文本字元串、x坐標、y坐標和可選的最大像素寬度。這兩個方法都以下列3個屬性為基礎
上下文提供了輔助確定文本大小的方法measureText()，這個方法接受一個參數，即要繪制的文本，返回一個TextMetrics對象，這個對象有一個width屬性，表示文本的寬度
為上下文應用變換，會導致使用不同的變換矩陣應用處理，從而產生不同的結果，可以通過如下方法來修改變換矩陣
如果想把一副圖像繪制到畫布上，可以使用drawImage()方法，調用這個方法時，可以使用三種不同的參數組合，最簡單的方式是傳入一個<img>元素，以及繪制該圖像的起點x和y坐標
可以多傳入兩個參數，表示目標寬度和高度
還可以把圖像中的某個區域繪制到上下文中，需要傳入9個參數：要繪制的圖像、源圖像的x坐標、源圖像的y坐標、源圖像的寬度、源圖像的高度、目標圖像的x坐標、目標圖像的y坐標、目標圖像的寬度、目標圖像的高度
除了給drawImage()方法傳入<img>元素外，還可以傳入另一個<canvas>元素作為其第一個參數。結合drawImage()和其他方法，可以對圖像進行各種基本操作，操作的結果可以通過toDataURL()方法獲得，toDataURL()是canvas的方法而不是上下文的方法
上下文會根據以下幾個屬性，自動為形狀或路徑繪制陰影，需要在繪制路徑之前設置
漸變有CanvasGradient實例表示，要創建一個新的線性漸變，可以調用createLinearGradient()方法，接受4個參數：startX、startY、endX、endY。創建漸變後，使用addColorStop()方法來指定色標，接受兩個參數：色標位置和css顏色值。色標位置是一個0（開始的顏色）到1（結束的顏色）之間的數字
表示從一個畫布上的點(30, 30)到點(70, 70)的漸變。起點的色標是白色，終點的色標是黑色。然後可以把fillStyle或者strokeStyle設置為這個對象，從而使用漸變來繪制形狀或描邊
要創建徑向漸變，可以使用createRadialGradient()方法，接受6個參數，對應著兩個圓的圓心和半徑
模式其實就是重復的圖像，可以用來填充或描邊圖像，使用createPattern()方法並傳入兩個參數：一個<img>元素和一個表示如何重復圖像的字元串。其中第二個參數的值與css的background-repeat屬性值相同，包括「repeat」、「repeat-x」、「repeat-y」和「no-repeat」
模式與漸變一樣，都是從畫布的原點(0, 0)開始的，將填充樣式設置為模式對象，只表示在某個特定的區域內顯示重復的圖像，而不是要從某個位置開始繪制重復圖像
上下文可以通過getImageData(x, y, width, height)取得原始圖像數據
這里返回的對象是ImageData的實例，每個ImageData對象都有三個屬性：width、height和data。其中data是一個數組，保存著圖像中每一個像素的數據。
在data數組中，每一個像素用4個元素來保存，分別表示紅、綠、藍和透明度。因此第一個像素的數據保存在數組的第0到第3個元素中，數組中的每個元素的值都介於0到255之間（包括0和255）
putImageData()方法可以將imageData表示的圖像繪制到畫布上
globalAlpha：用於指定所有繪制的透明度，是一個介於0到1之間的值，默認值為1
如果所有的後續操作都要基於相同的透明度，可以先把globalAlpha設置為適當的值，然後繪制
globalCompositionOperation：表示後繪制的圖形怎樣與先繪制的圖形結合，可能的值如下
Ⅳ html5 canvas在img標簽的圖片上繪制矩形框、矩形框為1px時線條模糊問題
前端需要在後端返回的圖片集合里，根據提供的對角線坐標繪制矩形。矩形可能是多個。效果達到如下：
1、根據後端返回的圖片list，生成canvas畫布，
2、把圖片畫到canvas裡面，再根據後端返回的坐標，在canvas里畫矩形框。
此項目中，後端返回的坐標是基於縮略圖的，但是前端渲染在頁面上的圖片，會按寬為788px來顯示，所以坐標應該要按照比例來算。
真實的左上x點的計算方式為：真實寬 / 壓縮寬 * 壓縮x點
https://blog.csdn.net/qq_29594393/article/details/52849339
https://www.runoob.com/w3cnote/html5-canvas-intro.html
https://www.imooc.com/wenda/detail/551496
https://blog.csdn.net/qq_44907926/article/details/114907056?spm=1001.2014.3001.5501
①畫矩形時，如果裡面的參數有不是整數的話，容易導致邊框粗細不一等問題。
②當矩形的邊框lineWidth設置為1px時候，會出現線條模糊的問題。
關於第②個問題的延申：
這是測試提給我的bug：
我的思路存在的問題：
首先，同樣是矩形的邊框我同樣設置的都是1px，不應該有的線條顏色深，有的顏色淡啊，排除了參數沒有取整的問題後，我懷疑了顏色red在畫布上的渲染問題，換成十六進制的同樣有問題。就在我一籌莫展的時候，我叫來了小夥伴，我說你看這線條顏色是不是不一樣，我開始懷疑我的眼神有問題。小夥伴說，你給線條整粗點看看這問題明顯嗎。我把邊框線條設置了2px，發現和1px的粗細是一樣的，並且顏色一樣了線條不模糊了。換成別的寬度，只要不是1px都沒有問題了。
思維的問題在於，我網路問題的描述有問題，我之前一直搜canvas繪制矩形線條深淺不一，我應該搜canvas矩形線條模糊。我排查問題的時候，固定思維模式覺得1px寫的沒錯，卻沒有嘗試排查。
關於這個問題的詳細解答與解決辦法：
canvas1px線條模糊
我的理解
canvas的線條畫法不一樣，canvas的每條線都有一條無限細的「中線」，線條的寬度是從中線向兩側延伸的，也就是說canvas繪制1px的時候，是中線向左右兩邊延申各取0.5，並不是向某一邊延申（如果只是往右延申就不再是問題了），此時問題出現了，計算機不允許出現小於1px的圖形，所以他做了一個折中的事：把這兩個像素都繪制了。所以，如此一來，本來1px的線條，就成了看起來2px寬的線條。
延申：
HTML 5 Canvas詳細講解 ———— 第二篇（清除canvas畫布上指定區域+橡皮擦功能實現；在畫布上平鋪指定圖片；在畫布上繪制文本；總結案例之刮刮樂功能實現）
Ⅵ 前端性能優化之路——圖片篇。
本人是一名前端開發者，在公司負責目前負責信息流服務，為五大手機廠商和各大App提供服務，每天的請求就是以億計算，加上我們又做了SSP和DSP，就是類似於網路廣告聯盟，騰訊廣點通這種。接觸過的應該知道，所以前端優化一直是我頭痛的問題，不僅要注重用戶體驗，同時要兼顧收益，有時候必須犧牲一些用戶體驗，但是作為一名有思想的前端，還是努力規避掉，希望能和從事相同業務的同學一起學習交流一下，話不多說，就來分享我的性能優化之路，有什麼不對的知識點，麻煩大家指出批評。
yahoo軍規把大部分的前端優化都提到了，而在js優化這一塊如果有興趣的額，推薦大家去看《 高性能javascript 》,書里講的非常詳細。 https://segmentfault.com/a/1190000008481413
Media Queries 調用高清背景圖
通過 devicePixelRatio的值，就可以區分普通顯示屏和高清屏，當devicePixelRatio值等於1時（也就是最小值），那麼它普通顯示屏，當devicePixelRatio值大於1(通常是1.5、2.0)，那麼它就是高清顯示屏。這時候我們可以讓UI准備2套圖片，甚至是3套圖片，不同像素的圖利用媒體查詢結合 devicePixelRatio 可以區分普通顯示屏和高清顯示屏，並給出了如下CSS設計方案：
也可以用less或者sass
如果省時間通用性高，就像我們是服務端用nginx對圖片進行處理，想要什麼樣尺寸的圖片自己裁切,我們提供了按比例縮放和自定尺寸的裁切方法，地址後拼接字元串就行。
與其他圖片格式相比，在肉眼無法分辨圖片質量差異的情況下，WebP的空間佔用是最小的，目前國內外各大互聯網公司都已經開始應用這一圖片格式。比如美團
想實現首先是判斷，即識別單次訪問的來源瀏覽器是否支持 webp 格式，其次是執行，如果該瀏覽器支持，則將原圖替換為 webp 格式，並返回。如果不支持，則顯示原格式圖片。 http://caniuse.mojijs.com/Home/Html/item/key/webp/index.html
在識別階段，我們有兩種方法：
1. Server 處理
只要有請求，服務端就能拿到你的User-Agent信息，通過對瀏覽器進行分類，支持webp放在白名單里，不支持的則為黑名單。判斷為白名單，則直接調用，返回webp格式圖片；反之，則顯示原圖。這種方式的優點在於，只需定期維護白名單即可，邏輯簡單；缺點則在於不可擴展、不可測試、UA判斷會出現不準確的情況。
Server處理中的另一種方式是通過讀取 JavaScript 種下的 cookie來實現判斷。這種方式的優點是表現穩定，訪問速度更快，切換無壓力。但缺點是，頁面靜態化會導致用戶切換瀏覽器時不能自主更新，圖片服務失效。比如用戶用支持webp的瀏覽器A請求頁面，這時緩存的靜態頁面均使用webp圖片，但當該用戶使用不支持webp的瀏覽器B時，訪問網頁則會出現請求不到圖片的報錯。
Client 處理，是美團雲為美團主站提供的處理方式。在這種處理方式中，瀏覽器端發送的beacon webp 請求後，通過檢測其載入情況來判定 webp 支持情況，然後瀏覽器寫一個cookie。之後通過讀取瀏覽器cookie判斷是否支持webp，就可以進行下一步替換操作了。
2.替換圖片過程中也是有兩種處理方式：
在 server 端處理的優點是對下游開發者透明，缺點是靜態頁面的緩存數量會翻倍。
替換方式如下：
在 client 端處理可以比較好地應對頁面靜態化的情況，主要針對懶載入（非首屏）的圖片進行處理，直接通過修改懶載入器來實現。
對非懶載入的圖片暫時沒有特別好的辦法。目前，可用替換路徑的方式來處理。
Client 處理實際上效果也是不錯的，美團頁面里90%以上的圖片都是懶載入的，基本上都可以滿足需求。對於大多數用戶來說，採用Client 處理實現webp轉換是個不錯的選擇。
既然提到圖片這一塊，我有忍不住想扯寫些題外的tracking Pixel（像素追蹤），幾乎所有網站都會做數據的採集，上報統計。特別是我們做SSP、DSP廣告這塊需要獲取例如
數據永遠說的是實話，數據證明一切可能。如facebook廣告投放的跨境電商朋友都會使用facebook Pixel(像素追蹤)以獲得各環節的精準數據。這樣追蹤數據後，我們才能投放廣告後銷量上去了，哪個才是效果最好的，哪個效果不好，進而通過多個數據對比，對廣告進行合理的調整優化。
國內搜狗、網路、360、新浪都是用這種 tracking Pixel 方法，實際就是利用1px 的圖片，在圖片地址後綴拼接你需要的信息參數，瀏覽器在請求任何資源的時候會發送當前系統的數據，比如瀏覽器信息，操作系統信息，作為http請求頭送過去，他們就能統計了。
為什麼不用js請求統計？
並不是所有的頁面都支持JS的！NoJSStats的實現機制就是網站分析中點擊流數據獲取的方式之一——Web Beacons，即在頁面中嵌入一個1像素的透明圖片，當該頁面被瀏覽時，圖片就會被請求載入，於是在後端的伺服器日誌中就會記錄該圖片的請求日誌，這樣就可以獲得日誌記錄。
例如網路：
本文引用@美團雲 提供的webP方法，感謝。
Ⅶ 怎麼在前端生成縮略圖，只上傳縮小後的圖片
需要瀏覽器支持html5。
用FileReader讀取本地文件，再用Image載入此文件並縮放繪制到canvas上。最後canvas.ToDataURL()取得縮放後文件的Base64編碼，將此編碼上傳到服務端，解碼為byte[]後，寫入文件。
Ⅷ 自學前端，誰有前端學習路線圖嗎
前端自學的話比較辛苦，因為需要強大的自製力抵制各種誘惑，還有有努力學習的上進心、耐心堅持學下去；現在網上很多培訓機構都有免費的視頻教程進行學習，結合視頻，自己多練、多想、不懂就問才是制勝關鍵。
前端完整學習路線
第一階段:
HTML CSS:HTML進階、CSS進階、div css布局、HTML css整站開發。
第二階段:HTML5和移動Web開發
HTML5:HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、Web Socket、Canvas。
CSS3:CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。
移動Web開發:跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。
第三階段:HTTP服務和AJAX編程
WEB伺服器基礎:伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。
AJAX上篇:Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。
AJAX下篇:JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。
第四階段:面向對象進階
面向對象終極篇:從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。
面向對象三大特徵:繼承性、多態性、封裝性、介面。
設計模式:面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。
第五階段:封裝一個屬於自己的框架
框架封裝基礎:事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。
框架封裝中級:運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。
框架封裝高級和補充:JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。
第六階段:模塊化組件開發
面向組件編程:面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。
面向模塊編程:AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。
第七階段:主流的流行框架
Web開發工作流:GIT/SVN、Yeoman腳手架、NPMer依賴管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。
常用庫:React.js、Vue.js、Zepto.js。
第八階段:HTML5原生移動應用開發
Cordova:WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。
Ionic:Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。
React Native:React Native簡介、React Native環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。
HTML5 :HTML5 中國產業聯盟、HTML5 Plus Runtime環境、HBuilder開發工具、MUI框架、H5 開發和部署。
第九階段: Node.js全棧開發:
快速入門:Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。
核心模塊和對象:全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操做。
Ⅸ 前端web的點9圖效果實現
這里只是一個怕自己忘記寫的一個筆記，不是很全很詳細，建議還是看 官方教程
圖片原始像素是348 x 220
我的需求是拉伸image可以自適應內容長度，但是拉伸不能導致兩邊的半圓被拉成橢圓
border-image可以使用圖片作為border(標准說法：border-image CSS屬性允許在元素的邊框上繪制圖像), 給出圖片後可以通過相應的參數來調整圖片的拉伸，這樣就可以像點9圖那樣保留部分內容不變的情況下，拉伸可拉伸部分來自適應。
我主要解釋一下 border-image: url("") 0 170 0 170 fill / 1px 170px stretch ,
這里0 170 0 170就是劃分了原始圖片內容,稱之為border-image-slice
後面的 1px 170px 指的是border-image-width ，字面意思是邊框圖片寬度，作用是將 DOM 節點分割成九宮格，這里指的就是作為實際容器的那個節點的顯示範圍了，我也設置為170， stretch作為border-image-repeat說明圖片在超過原始長度後使用拉伸的方式
這里有更易讀，更詳細的文章 border-image的正解用法
點九圖編輯器
https://developer.mozilla.org/zh-CN/docs/web/css/css_backgrounds_and_borders/border-image_generator (這個載入不出預覽圖)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator （這個可以載入出預覽圖）
Ⅹ web前端裡面什麼是nav
nav是html5新出的一種便簽，一般用來包裹網頁中的導航條。使用方法如下：
<nav>
<span>主頁</span>
<span>列表</span>
</nav>