html5

原文地址： canvas图形编辑器 使用canvas进行开发项目，我们离不开各种线段，曲线，图形，但每次都必须用代码一步一步去实现，显得非常麻烦。有没有一种类似于PS，CAD之类的可视化工具，绘制出基本的图形，然后输出代码。之后我们就可以在这个生成的图形场景的基础上去实现功能，那将是多么的美妙的事啊。话不多说，我们来实现一个图形编辑器吧😂。 主要实现如下的功能： 直线(实线、虚线) 贝塞尔曲线(2次，3次) 多边形(三角形、矩形、任意边形) 多角星(3角星、4角星、5角星...) 圆形、椭圆 实际效果: drawboard(推荐在chrome或safari下运行) 功能点包括： 所有的图形都可以拖拽位置，直线和曲线需要拖拽中点(黄色圆点)，其他图形只需要把鼠标放于图形内部拖拽即可； 所有的图形只要把鼠标放于中心点或图形内部，然后按delete键即可删除； 线段可以实现拉伸减少长度，旋转角度； 贝塞尔曲线可以通过拖拽控制点实现任意形状的变化； 多边形可以拖拽控制点控制多边形的旋转角度和大小变化，所有顶点都可以拖拽； 多角星除了多边形的功能外，拖拽第二控制点可以实现图形的饱满程度； 是否填充图形，是否显示控制线，是否显示背景格； 生成代码。 使用方式： 选中工具栏中的图形选项，是否填充，颜色等，然后在画板拖动鼠标，同时选中的工具栏中的选项复位，此时为绘图模式； 完成绘制图形后

一、 为什么要关注企业内网安全？ 随着云计算与大数据技术的日渐成熟，IT已经成为企业业务的核心支撑，并即将成为企业业务创新的核心驱动力。因此，信息安全成为了企业安全的重中之重。绝大部分的企业都会建立企业内网并部署防火墙，由于网络的天然隔离性以及防火墙的存在，大部分的安全事故并非由外部入侵导致，因此，我们更应该关注的是“企业内网安全”。 企业内网安全分为“客户端安全”与“服务器端安全”两大组成部分。 1.1 客户端安全 客户端安全是一个很容易被大家忽视的问题，随着用户越来越多的把隐私毫无保留的交给各式各样的APP，作为客户端开发者，企业通常会从三个维度保障用户信息安全，以防止数据泄露。一是事前防护，文档透明加密，二是事中控制，流通渠道管控，三是事后审计，内容级行为审计。 1.2 服务器端安全 有数据表明，70%以上的安全事故来自企业内部的运维管理，这意味着内网安全管理首先要解决的是服务器端安全。 当企业的IT资产越来越多，当参与运维的岗位越来越多，企业运维管理变得日益复杂，如果没有一套好的机制，就会产生运维混乱与失控，一旦产生服务器端安全事故，企业将遭受巨大损失；另一方面，国内外相关法规均对企业信息管理提出了内控与审计的明确要求。 那么如何解决服务器端安全问题呢？行云管家堡垒机帮助企业满足IT可控运维与安全审计的诉求，以解决企业内网的服务器端安全问题。 二、 行云管家 堡垒机

每次滚动到元素时，都显示加载动画，如何添加？ 元素添加初始参数 以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。 添加初始数据，默认透明度0、左右分别移动100px。 //左侧容器 .item-leftContainer { opacity: 0; transform: translateX(-100px); } //右侧容器 .item-rightContainer { opacity: 0; transform: translateX(100px); } 添加动画数据 在less中添加动画数据。这里只设置了to，也可以省略第1步中的初始参数设置而在动画里设置from。 执行后，透明度由0到1，俩个容器向中间移动100px回到原处。 //动画 @keyframes showLeft { to { opacity: 1; transform: translateX(0px); } } @keyframes showRight { to { opacity: 1; transform: translateX(0px); } } @keyframes hideLeft { to { opacity: 0; transform: translateX(-100px); } } @keyframes hideRight { to { opacity: 0; transform:

摘要 　　 axios是一个基于promise的HTTP库，可以用于浏览器中进行AJAX请求处理。在项目中，为了实现通用性，封装了一个axios请求。 axios封装 1、配置环境变量 // 根据不同环境变量选择不同的接口服务器域名 export const BASE_URL = process.env.REACT_APP_API; 2、创建axios实例 　　 创建axios实例可以根据官方文档进行属于自己的配置，具体属性可以参考 https://www.kancloud.cn/yunye/axios/234845 // 创建axios实例 const service = axios.create({ baseURL: BASE_URL, headers: { 'Content-Type': 'application/json;charset=UTF-8' }, timeout: 5 * 1000 // 请求超时时间 }); 3、创建request拦截器 　　 在请求、响应被then 或 catch 处理前拦截它们，在发送请求之前可以做些处理或者对请求错误做些什么处理。具体配置可以参考官网。 // request拦截器 service.interceptors.request.use( config => { // 登录时，Token登录 // const token = //

Pointer Events API 是Hmtl5的事件规范之一，它主要目的是用来将鼠标（Mouse）、触摸（touch)和触控笔（pen）三种事件整合为统一的API。 Pointer Event Pointer指可以在屏幕上反馈一个指定坐标的输入设备。Pointer Event事件和Touch Event API对应的触摸事件类似，它继承扩展了Touch Event,因此拥有Touch Event的常用属性。Pointer属性如下图： 说明： pointerId:代表每一个独立的Pointer。根据id，我们可以很轻松的实现多点触控应用。 width/height:Mouse Event在屏幕上只能覆盖一个点的位置，但是一个Pointer可能覆盖一个更大的区域。 isPrimary:当有多个Pointer被检测到的时候（比如多点触摸），对每一种类型的Pointer会存在一个Primary Poiter。只有Primary Poiter会产生与之对应的Mouse Event。 Pointer Event API核心事件： Mouse events, pointer events和touch events 对照表 Pointer API 的好处 Poiter API 整合了鼠标、触摸和触控笔的输入，使得我们无需对各种类型的事件区分对待。 目前不论是web还是本地应用都被设计成跨终端

Safari 作为苹果的御用默认浏览器，随着Mac OS X Lion 的发布重获新生，目前经历了几个版本的迭代，拓展性上虽仍不如 Google Chrome ，但在 Mac OS 下，Safari 的稳定和速度，以及对整个生态圈各项服务的支持，体验早已今非昔比。如果你是一位忠实的safari用户，想不想在在Mac 平台下也有实用的 Safari 浏览器扩展插件？今天我们 chrome插件网 就介绍如何在苹果电脑Mac浏览器Safari中安装使用浏览器插件。 一、Safari可以安装哪里浏览器插件？ 用户需要对自己安装的safari插件所有了解，仅在需要时使用插件，了解已安装的插件，并控制在哪些情况下允许网站使用这些插件。为了更快地载入网页、降低能耗并加强安全性，Safari 针对使用 HTML5 网页标准的内容进行了优化。Safari 在载入网页时会优先处理这样的内容。一些网站要求使用 Flash插件 或 Java这样的插件，以显示视频、动画或其他专有内容。您可以安装此类插件，然后使用 Safari 为要访问的网站启用这些插件。启用插件后，只要您经常在任何网站使用该插件，它就会保持活跃。 二、Safari浏览器安装safari插件的方法步骤 1.mac上打开safari，找到safari扩展。 2.点击safari扩展，就会进入app store市场点击下载安装safari插件。

在微信小程序的开发过程中如果有使用过tabbar的同学，我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar，可以页面中就是不显示呢？可不可以有些页面显示tabbar，而有些页面不显示tabbar呢？今天我把我在开发过程中遇到的问题整理出来跟大家分享。 问题1：为什么页面底部不显示tabbar？ 很多网友（包括我自己）也遇到过此类问题，在app.json里面明明加了tabbar，list里面也加了路径怎么就是不显示呢？举例，如下代码，为什么屏幕页面底部没有如期出现tabbar呢？ { " pages ": [ "pages/clickDemo/clickDemo" , "pages/logs/logs" , "pages/index/index" , "pages/mypage/mypage" ] , " window ": { " backgroundTextStyle ": "dark " , " navigationBarBackgroundColor ": "#ddd" , " navigationBarTitleText ": "Tabbar Demo" , " navigationBarTextStyle ": "black" , " backgroundColor ": "#ff0000" } , " tabBar ": {

H5的新特性 1.语义化标签 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其他设备的解析 便于团队开发和维护 2.表单新特性 search、emile 3.多媒体视频(video)和音频(audio) 4.web存储 sessionstorage:关闭浏览器清空数据，储存大小约5M。 localstorage：永久生效，存储大小20M，多窗口下都可以使用 C3的新特性 1.选择器：属性选择器E[attr]，伪类选择器E:nth-child(n)，空伪类E:empty ，排除伪类E:not(selector) 2.颜色：新增了RGBA、HSLA模式 3.文本：为文本设置阴影增强文本的表现能力，通过 text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度） 4.盒模型：box-sizing: border-box; 5.边框：圆角border-radius，阴影box-shadow 6.背景： 通过 background-size 设置背景图片的尺寸。 通过 background-origin 可以设置背景图片定位(background-position)的参照原点。 通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小

关于前端的话题知乎不能再多了，但作为一个自学者，希望以我的经历给你们一点启示或者帮助。 关于前端的学习资料和视频可谓多之又多，学习方法也是大相径庭，有推荐跟着慕课网的，也有W3C的，传智播客，这里就简单提一下吧。我想大部分都是零基础的居多吧，所以一些必备的基础知识都没有的话，后面的学习是很困难的。这里既然是自学，那么对入门的书籍或者视频选择应当由浅入深。好了话不多说，进入干货环节。 最基础的三个知识点就是html+css+js，但是很多小白可能并不知道html5和html，或者XHTML的区别，也不知道还有css2和css3的区分，我在学了近半个月以后只慢慢了解试试脉络。 html 这本可能不是最好的，但对于小白来说是最浅显移动，而且例子生动形象，慢慢加大难度，当时我是在自学了半个月以后去看的这本书，依然觉得很不错。这里我在推荐一个视频网站前端与移动开发基础视频，他很细致的讲解了前端究竟是做什么的，也提到3种最常用的IDE，另外我建议大家看视频最好就只看一个网站的就行，因为这样不耽误你的学习时间，节奏也不会乱，我是觉得这里的视频虽然难度不大，也不算很精，但入门很不错。 我希望自学的同学不要奢望像培训班那样，4个多月或许就能找到一份不错的工作。但你最好是一步一个脚印的慢慢来，培养自己的自学能力，这对以后框架的学习很有帮助。这本书无论是在校大学生还是普通的在职人员

近年来,网络直播行业呈现高速发展趋势,由于其操作便利、门槛低、收益暴利等特点导致网络直播行业刚一兴起就吸引了无数从业者。时至今日，直播平台内容同质化现象严重，竞争尤其激烈，而新兴的一对一直播软件如“雨后春笋”般进入了人们的视野。一对一直播软件源码开发核心业务模块是一对一语音聊天和一对一视频聊天，同时需要兼顾传统直播平台的互动打赏等功能。 那么一对一直播系统该怎么开发呢？ 一对一的模式，其实和传统的直播搭建形式相同，也要通过一套功能全面的一对一直播源码才能完成直播平台的搭建部署。对于直播平台的搭建,可以从环境部署开始。其中包括两个方面：即服务端和客户端。 1.服务端：在部署服务端环境包含最常用的web服务nginx，MySQL、Nosql，api开发最多的三种选择：java环境，需要jdk，tomcat/jboss;php环境，需要安装php，odp;lua环境，需要安装lua、luajit 2.客户端：相比起服务端环境部署，客户端环境部署复杂很多，简单说，分为三步走： 第一步，分解一对一直播系统开发功能，了解你所需要的直播功能。 第二步，寻找合适的云服务SDK进行嵌入，在APICloud的聚合API中可以轻易找到以上的功能模块，挑选合适的模块封装到自己的App中。 第三步: App框架搭建，在APICloud Studio中直接创建应用框架，有三个常用页面框架备选； 2.积木式拼装