不管是在制图软件中还是Web页面的DOM元素，都有层的概念。在制图软件中，大家比较熟悉，能非常的清晰的看出图层的概念。而在Web页面中，特别是我们熟悉的HTML的DOM中，其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次，而DOM中需要依赖于CSS的属性来控制他的层次关系。其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。 SVG的图层 首先我们来看SVG图层这个东东，相信只要使用过制图软件，比如Photoshop或者Sketch等，对于图层的认识
图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。
在网页设计中，背景是构建视觉层次和氛围的关键元素之一。CSS的背景属性为我们提供了强大的工具，用于控制元素的背景颜色、图片、以及它们的显示方式。本文将深入浅出地探讨CSS背景属性的基础知识，包括常见问题、易错点及避免策略，并通过实际代码示例加以说明。
前言 因为一些特殊的业务需求，经过一个多月的蛰伏及思考，我开发了这款 jQuery 图片查看器插件 Magnify，它实现了 Windows 照片查看器的所有功能，比如模态窗的拖拽、调整大小、最大化，图片的缩放、旋转，平移、键盘控制等。插件的样式都是最基础的 CSS，定制非常容易，可以轻松修改成自己喜欢的样式。随后会陆续发布 React 及 Vue 相关版本的插件。本文主要介绍插件的特点及使用方法，而关于插件开发的细节将会在之后的具体文章中说明。 Github: https://github.com/
最近入手高清版的 MacBook Pro 之后，开始研究高清屏下一些图标怎么去展示的问题，一通瞎搜索，发现最好的方式是使用字体图标。国外这方面的资源很多，而国内图标字体非常少，今天终于找到一个中文字图标：Font屌（对于这个名字，各位自行评价吧...）。
来，干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库：iconoo，所以，开门见山，star吧少年少妇们！（这样的我是不是应该要加个github互粉的团伙了？） 主题说完了，下面进入正题。
图片显示是网页设计中的重要组成部分，而图片的大小和位置也会对页面的整体美观度产生影响。在实际的网站开发过程中，我们会遇到需要将图片放入一个容器中，并让其按比例缩放以适应容器大小的需求。
github地址： https://github.com/malun666/AndyJS2
使用图片也可以达到同样的效果，但是图片如果像素不够，放大了之后效果会虚；还有，图片需要另外存储与加载，使用起来不如图标只使用一个名称方便；再者就是，接下来会看到，图标可以随意改变颜色，而图像不能。
因为图片1-5是使用行内块的方式布局，只要控制图片1的div的margin-left改变，就可以跟推箱子一样，实现5个图片的左右滑动。
background会依据ImageView组件给定的长宽进行拉伸，而src就存放的是原图的大小。不会进行拉伸。src是图片内容（前景），bg是背景，能够同一时候使用。
注意canvas 的 width 和 height 不要用 css 来设定，如果用 css 样式来设置，会变形和失真
canvas对于大部分前端开发人员来说，可以用一个词来形容--既熟悉又陌生。为什么这样说，因为大部分前端开发人员在写业务代码的时候用到canvas的概率很小，就算用到了，也只是类似drawImage这个API,并且，对drawImage这个API的了解也并不深刻，只知道它可以将图片绘制到画布上，其他的功能大部分人应该都不知道。
(xStart,yStart)是线段的起点，(xEnd,yEnd)是线段终点。起点到终点之间的颜色呈渐变。
html5Canvas的知识点，是程序员开发者必备技能，在实际工作中也常常会涉及到。
本文主要探讨JPG/PNG转SVG矢量格式并支持FILL的方法，介绍在线转换网站和通过illustator转换的经验。
笔者开源了一个Web思维导图mind-map，最近在优化背景图片效果的时候遇到了一个问题，页面上展示时背景图片是通过css使用background-image渲染的，而导出的时候实际上是绘制到canvas上导出的，那么就会有个问题，css的背景图片支持比较丰富的效果，比如通过background-size设置大小，通过background-position设置位置，通过background-repeat设置重复，但是canvas笔者只找到一个createPattern()方法，且只支持设置重复效果，那么如何在canvas里模拟一定的css背景效果呢，不要走开，接下来一起来试试。
作为前端工程师，很多人的主要工作就是和网页打交道。那扪心自问一下，写了这么多网页之后，你是不是也想要做些尝试或者突破呢？如果是的话，我建议大家试试可视化。
SwiftUI 提供了强大的布局能力，不过这些布局操作都是在视图之间进行的。当我们想在 Text 中进行图文混排时，需要采用与视图布局不同的思路与操作方式。本文将首先介绍一些与 Text 有关的知识，并通过一个实际案例，为大家梳理出在 SwiftUI 中用 Text 实现图文混排的思路。
一、安装我们所需要的一些库 cnpm install mint-ui -S // 安装mint-ui库，ui库，cnmp是按照淘宝镜像后的用法，用法和npm一样。-s是将库添加到项目的packag
在前端最令人兴奋的技术莫过于Canvas技术。它可以制作出更加绚丽的效果，甚至完全可以胜任游戏开发。最近我也在学习Canvas相关的技术，总是想拿出来跟大家一起分享分享，由于这块技术比较庞大，所以我就分章节一章一章地跟大家分享。这几章节中我们并不涉及webGL相关的知识，感兴趣的可以自己玩一玩。
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情 >> # CSS知识框架
写这篇文章的缘由是因为看到了这个页面： 戳我看看（移动端页面，使用模拟器观看） 运用 CSS3 完成的 3D 视角，虽然有一些晕3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。 并且掌握原理之后制作起来也并不算废力，好好的研究了一番后将一些学习过程共享给大家。 下面进入正文：（一些 Gif 图片较大，需要等待一会） 3D 效果示意 百闻不如一见，先直观感受一下上述我所说的效果： 最好能点进去看看，这里我使用了带背景色的 div 作为示例，我们的视角处于一个正方
CSS3变形 CSS2.1中的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。多年来，Web设计师依赖于图片、Flash或 JavaScript才能完成修改页面的外观。 CSS3将改变设计师这种思维，借助CSS3可以轻松倾斜、缩放、移动以及翻转元素。 2012年9月，W3C组织发布了CSS3变形工作草案。允许CSS把元素转变为2D或3D空间，这个草案包括了CSS32D变形和CSS33D变形。CSS3变形是一些效果的集合， 比如平移、旋转、缩放和倾斜效果，每个效果都称为变形函数（ Transform Function），它们可以操控元素发生旋转、缩放、平移等变化。 这些效果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形无须加载这些额外的文件，再一次提升了开发效率， 提高了页面的执行效率。 CSS3变形属性及函数： CSS3变形允许动态的控制元素，可以在屏幕周围移动它们，缩小或扩大、旋转，或结合所有这些产生复杂的动画效果。通过CSS变形，可以让元素生成静态视觉效果，也可以很容易结合CSS3的transition和动画的keyframe产生 一些动画效果：http:/ /www.iis7.com/b/wzjk/ CSS3变形中具有 X/ Y可用的函数： translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。 1，CSS3 2D变形函数包括： translate()、scale()、rotate()和skew()。translate()函数接受CSS的标准度量单位； scale()函数接受 一个0～1 之间的十进制值； rotate() 和 skew() 两个函数都接受 一个径向的度量单位值deg。除了rotate()函数之外，每个函数都接受X轴和Y轴的参数。 2D变形中还有一个矩阵matrix()函数， 包括6个参数。 2，CSS3 3D变形函数包括： rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()和scale3d()。 3D变形中也包括一个矩阵matrix3d()函数， 包括16 个参数。 CSS 变形属性详解： transform属性指一组转换函数， transform-origin属性指定元素的中心点在哪， 新增加了第三个数transform-origin-z， 控制元素三维空间中心点。 transform-style的值设置为preserve- 3d， 建立 一个3D渲染环境。 ：CSS3 2D变形 在二维或三维空间，元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴，也就是大家常说的水平轴和垂直轴；而3D变形工作在X轴和Y轴之外， 还有一个Z轴，这些3D变换不仅可以定义元素的长度和宽度，还有深度。首先讨论元素在2D平面如何变换，然后在进入3D变换的讨论。CSS32D变换让Web设计师有了更多的自由来装饰和变形HTML组件，同时有更多的功能装饰文本和更多的动画选项来装饰div元素。2D位移在这里translate是一种方法，将元素向指定的方向移动， 类似于position中的relative。可以简单理解为，使用translate()函数可以把元素从原来的位置移动，而不影响在 X、 Y 轴上任何组件。 translate() 函数可以取一个值tx，也可以取两个值tx和 ty， ·tx：代表X轴（ 横坐标）移动的向量长度， 当其值为正值时， 元素向X轴右方向移动， 反之其值为负值时， 元素向X轴左方向移动。 ·ty：代表Y轴（ 纵坐标） 移动的向量长度，当其值为正值时， 元素向Y轴下方向移动， 反之其值为负值时， 元素向Y轴上方向移动。 如果ty没有显式设置时， 相当于ty=0。 结合起来， translate()函数移动元素主要有以下三种移动。 -水平移动： 向右移动 translate( tx, 0) 和向左移动 translate(- tx, 0)。 -垂直移动：向上移动 translate( 0,- ty) 和向下移动 translate( 0, ty)。 -对角移动：右下角移动 translate( tx, ty)、右上角移动translate( tx,- ty)、 左上角移动translate(- tx,- ty) 和左下角移动translate(- tx, ty)。 如果要将对象沿着一个方向移动， 如沿着水平轴或者纵轴移动， 可以使用translate( tx, 0) 和translate( 0, ty)来实现。 其实在变形中还为单独一个方向移动对象提供了更简单的方法。 ·translateX()：水平方向移动一个对象。通过给定一个X轴方向的数值指定对象沿水平轴方向的位移。简单点
众所周知，一个元素，动往往比静更吸引眼球； 一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验； 一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。 近两年，小到loading动画，表
最开始学html5的时候，曾特意了解过canvas，还记得当时为了搞明白canvas的api，绞尽脑汁了很多个日日夜夜。
颜色的应用主要分为前景色、背景色和透明三个部分。 一、前景色 color color前景色 值: <color> | inherit 初始值: 用户代理特定的值 应用于: 所有元素 继承性: 有 一般来说，前景是元素的文本，不过前景还包括元素周围的边框。有两种方式直接影响一个元素的前景色，可以使用color属性，也可以使用属性border-color设置边框颜色。 二、透明度 opacity opacity是CSS3中专门用来设置透明度的一个属性，opacity只能给整个元素设置一个
主要介绍如何用ArcGIS JS API 4.14实现在二维地图中添加图片的操作。
这段时间有幸加入了一个关于微信小程序的项目开发组，从无到有的根据文档自行学习了小程序的开发过程，前面已经有几位前辈的文章珠玉在前，我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧。 在结构和样式方面，小程序提供了一些常用的标签与控件，比如： view，小程序主要的布局元素，类似于html标签的div，你也完全可以像控制div那样去控制view。 scroll-view，你要滚动内容的话，没必要用view去做overflow，scroll-view提供了更为强大的功能，通过参数的调整，你可以控制
位图，亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。然而，如果从稍远的位置观看它，位图图像的颜色和形状又显得是连续的。 提到SVG，我想大多数人的第一印象是矢量缩放。是的，SVG是制作Logo、图标及按钮的理想选择。和位图不同，SVG可以在不失真情况下进行任意的缩放。同时，和传统Web字体不同的是，SVG可以使用多种颜色、渐变甚至
在学习和使用『Stable Diffusion』的过程中，『ControlNet』是一个不可忽视的关键组件。『ControlNet』是一个用于增强图像生成过程可控性的强大工具，允许用户通过提供特定的控制图像来精确指导生成结果。本文将讲解 『ControlNet』的基本概念。
前两天在浏览 苹果 16寸 营销页面[1] 的时候，发现了几个比较有意思的交互，心里想着自己虽然是一个穷逼，但是知识是无界限的呀，于是便研究了一波。
让世界充满爱的图片处理工具 壹 项目名称：图片实时处理使用工具 iOS-GPUImage 项目简介：本项目是基于 ios 的图片处理 App，完全模仿 QQ 影像2.0，使用 QQ 影像资源。其主要
答：有audio标签，video标签，HTMLAudioElement和HTMLVideoElement，支持audio和video的事件。
接下来，我会把纯前端实现生成带二维码的海报全流程给大家讲个明明白白，把我自己遇到的坑，给大家详细分享并讲解，防止大家遇到相似问题，即使遇到问题，也会有一个明确的方向，并且吐血建议大家收藏一波，以备不时之需。(你不能保证以后的需求，没有类似的吧，有的话，记得翻出来看看)
https://dark2017.github.io/vue-dark-photo.github.io/
作为一只前端开发者，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新。
1、屏幕相关概念 1.1分辨率 是指屏幕上有横竖各有多少个像素 1.2屏幕尺寸 指的是手机实际的物理尺寸，比如常用的2.8英寸，3.2英寸，3.5英寸，3.7英寸 android将屏幕大小分为四个级别（small，normal，large，and extra large）。 1.3屏幕密度 每英寸像素数 手机可以有相同的分辨率，但屏幕尺寸可以不相同， Diagonal pixel表示对角线的像素值（=），DPI=933/3.7=252 android将实际的屏幕密度分为四个通用尺寸（low，medium，high，and extra high） 一般情况下的普通屏幕：ldpi是120dpi，mdpi是160dpi，hdpi是240dpi，xhdpi是320dpi 对于屏幕来说，dpi越大，屏幕的精细度越高，屏幕看起来就越清楚 1.4密度无关的像素（Density-independent pixel——dip） dip是一种虚拟的像素单位 dip和具体像素值的对应公式是dip/pixel=dpi值/160,也就是px = dp * (dpi / 160) 当你定义应用的布局的UI时应该使用dp单位，确保UI在不同的屏幕上正确显示。 手机屏幕分类和像素密度的对应关系如表1所示 手机尺寸分布情况（http://developer.android.com/resources/dashboard/screens.html）如图所示， 目前主要是以分辨率为800*480和854*480的手机用户居多 从以上的屏幕尺寸分布情况上看，其实手机只要考虑3-4.5寸之间密度为1和1.5的手机 2、android多屏幕支持机制 Android的支持多屏幕机制即用为当前设备屏幕提供一种合适的方式来共同管理并解析应用资源。 Android平台中支持一系列你所提供的指定大小（size-specific）,指定密度（density-specific）的合适资源。 指定大小（size-specific）的合适资源是指small, normal, large, and xlarge。 指定密度（density-specific）的合适资源，是指ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high). Android有个自动匹配机制去选择对应的布局和图片资源 1）界面布局方面 根据物理尺寸的大小准备5套布局: layout(放一些通用布局xml文件，比如界面顶部和底部的布局，不会随着屏幕大小变化，类似windos窗口的title bar), layout-small(屏幕尺寸小于3英寸左右的布局）， layout-normal(屏幕尺寸小于4.5英寸左右）， layout-large(4英寸-7英寸之间）， layout-xlarge(7-10英寸之间） 2）图片资源方面 需要根据dpi值准备5套图片资源: drawable：主要放置xml配置文件或者对分辨率要求较低的图片 drawalbe-ldpi:低分辨率的图片,如QVGA (240x320) drawable-mdpi:中等分辨率的图片,如HVGA (320x480) drawable-hdpi:高分辨率的图片,如WVGA (480x800),FWVGA (480x854) drawable-xhdpi：至少960dp x 720dp Android有个自动匹配机制去选择对应的布局和图片资源。 系统会根据机器的分辨率来分别到这几个文件夹里面去找对应的图片。 在开发程序时为了兼容不同平台不同屏幕，建议各自文件夹根据需求均存放不同版本图片。 3、AndroidManifest.xml 配置 android从1.6和更高，Google为了方便开发者对于各种分辨率机型的移植而增加了自动适配的功能 <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:anyDensity="true"/> 3.1是否支持多种不同密度的屏幕 android:anyDensity=["true" | "false"] 如果android:anyDensity
作为一只前端狗，我们的使命就是在满足产品需求、实现交互设计的基础上，将最好的体验呈现给用户爸爸们。在保证性能的同时，我们通常会给页面加一些动态效果，以增强页面的表现力并提升页面的交互体验。故将前端实现动效的几种常用方式整理成此篇小结，以求温故而知新，如有不当还望多多指正。
jpeg优势： 非常通用，JPEG在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果。 jpeg劣势： 它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果；
SVG是构建XML树的方式来达到绘制图形的，canvas是通过调用相关的方法来绘制图形的。
因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以 2 个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。
HT一直被客户称道的就是其全矢量化的设计特色，矢量相比传统图片好处太多了： 矢量可无级缩放，界面不失真不模糊 描述矢量的文本内容远比图片小得多 目前各种window.devicePixelRatio不一致的设备，矢量可能是唯一彻底的解决方案 业务数据绑定 提起矢量一般都会想到SVG，但这是个坑人的玩意儿，这么多年就没见一个完善的实现者，浏览器实现千差万别，高级属性根本不能玩，Adobe SVG Viewer好多年前就停止更新，Flex支持SVG导入也仅供基本属性玩玩，当然SVG也不是一无是处highchar
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让Canvas可享用到现有丰富的SVG素材，并不失SVG矢量无级缩放的特点。 《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/png类型，而SVG格式的数据类
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
