Ⅰ 前端如何根据数据画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>