子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

分类:Front End

【实战】HTML5摄像头拍照组件的封装

摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。…

+ 阅读更多

Webstorm(Mac版)快捷键整理

用Webstorm来调试Node代码简直太赞了,断点调试、属性方法快速等特性让我快速脱离了用Sublime text + node-inspector那种刀耕火种的痛苦状态,幸福指数嗖嗖嗖的就上来了~~~~…

+ 阅读更多

学习笔记:vim基础 —— 多窗口功能

一般的编辑软件都有“切割窗口或冻结窗口”的功能,使得一个文件或多个文件放在多个窗口里展示。vim也有这个功能。

下面总结一下Vim中的多窗口操作方法。…

+ 阅读更多

学习笔记:vim基础 —— 命令行备忘录

缘由:又一次被队友吐槽:咋连vim都不会用?!~( ╯□╰ )~。。。这就尴尬了,于是赶紧找一波资料,做一下笔记,方便下次查找和理解。

一. vim的三种模式

+ 阅读更多

【实战】封装一个audio音频组件

备注:因为懒得去重复些一堆的事件兼容性函数,先用jQuery库快速捣鼓一个audio音频组件。等以后有空了,再干掉jQuery库的依赖,用纯JavaScript重构一下。…

+ 阅读更多

【小技巧】解决iPhone中video视频的行内播放

如果我们希望在一个<div>内播放<video>视频,我们可能会这么写:

// CSS: 
video {width: 100%; height: auto;}

// HTML: 
<div style="width: 500px; height: 300px;">
    <video src="test.mp4"
+ 阅读更多

原生JS:无刷新表单的兼容性封装(IE6+)

在做form表单提交的时候,都会遇到一个非常尴尬的事情:就是浏览器默认的submit功能竟然会刷新当前页面,并跳转至action链接

这(“▔□▔) Σ<(=~д~=!)>…

+ 阅读更多

canvas转base64/jpeg时,透明区域变成黑色背景的解决方案

问题:png图片转jpeg时,透明区域被填充成黑色

在用canvas将png图片转jpeg时,发现透明区域被填充成黑色。

代码如下:

<p>Canvas:</p>
<canvas id="canvas"
+ 阅读更多

JavaScript:获取url的querystring参数

一. 获取url的querystring参数

获取url的querystring参数的两种方法如下:

1.1 方法一:正则匹配

//获取url中的参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)",
+ 阅读更多

input[file]标签的accept=”image/*”属性响应很慢的解决办法

input[file]标签的accept属性可用于指定上传文件的MIME类型

例如,想要实现默认上传图片文件的代码,代码可如下:

<input type="file" name="file" class="element" accept="image/*">
+ 阅读更多

canvas在高倍屏下变模糊的处理办法

一. 事起缘由

最近在用Canvas做社区网站的技能雷达图,如下图所示。

一倍屏下的显示情况:

image_1au479vu344r18fqg3b74a4859.png-7.2kB

二倍屏下的显示情况:

mohu.png-12.3kB

正当我很开心的准备发布出去时,用Mac Book…

+ 阅读更多

总结:http状态码

简单版:

  • 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
+ 阅读更多

HTML5读取拖放的本地文件

在桌面上创建了自定义的放置目标后,可以从桌面上把文件拖放到该目标。与拖放一张图片或链接类似,从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在event.dataTransfer.files中读取到被放置的文件,此时它是一个File对象,与通过文件输入字段取得的File对象一样。…

+ 阅读更多

学习笔记:HTML5的拖放 API

在HTML5之前,如果要实现拖放效果,一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果,比较麻烦。而HTML5规范实现了原生拖放功能,使得元素拖放的实现更加方便和高效。…

+ 阅读更多

独创系列:雷达图生成组件radarChart.js

项目地址: https://github.com/dengzhirong/radarChart

Demo展示地址: https://dengzhirong.github.io/radarChart/radarChart.html

一. 使用方法:

1.1 引入组件资源

需要在页面中首先引入radarChart.js和radarChart.css:…

+ 阅读更多

我的Sublime Text3插件配置

缘由:每次重装电脑后,Sublime Text的插件又得重新谷歌一份来拼凑,着实很累,还不能保证完整还原。所以写此文档,记录我的Sublime Text3常用插件配置清单,和插件的使用方法。…

+ 阅读更多

总结:Sublime Text3 快捷键 (Windows版)

缘由:尽管谷歌一下就能搜出很多Sublime Text快捷键总结的文章,但是有些分类和快捷键的总结不够完善。自己的记忆不好,需常**用常查,故总结一份,方便日后查找。…

+ 阅读更多

SVG之分组与引用对象

SVG提供了一些元素,允许我们对元素进行分组,从而使得文档更加结构化、模块化。

<g>元素

<g>元素会将其所有子元素作为一个组合,通常组合还会有一个唯一的id作为名称。在程序中类似于“层”的概念,一个层就是一些相关对象构成的组合。每个组合还可以拥有自己的…

+ 阅读更多

使用JS控制伪元素的几种方法

一. 缘由:

本文源于在OSC社区中,有人提问如何用jq获取伪元素。我第一想法是强大的CSS Query应该可以获取伪元素吧。

然而事实上,CSS Query并不能。即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:before”)来获取:before伪元素。…

+ 阅读更多

:before和:after伪元素的常见用法总结

1. 利用content属性,为元素添加内容修饰:

1) 添加字符串:

使用引号包括一段字符串,将会向元素内容中添加字符串。栗子:

a:after { content: "after content"; }

2) 使用attr()方法,调用当前元素的属性的值:

+ 阅读更多

HTML5 拖放API 学习笔记整理

在HTML5推出拖放API之前,我们想要实现拖拽效果,一般都是使用mousedown、mousemove、mouseup鼠标事件监听来模拟出拖拽效果,代码量大,而且由于为了实时的拖拽效果而需要不断获取鼠标坐标位置和修改元素的位置,导致性能较差。而HTML5提供了原生的拖放API,无疑简单很多,而且性能较好。…

+ 阅读更多

Canvas API 语法整理

总有一些API记不住,所以,决定整理出来,方便查用。

canvas元素

canvas元素的属性有width和height。方法有以下三个:
|方法|说明|
|–
|getContext()|返回与该canvas元素相关的绘图环境变量。属性值有"2d"和"3d"。|…

+ 阅读更多

JavaScript用户交互:移动物体

交互动画的一个主要目标是创建出流畅的用户体验,其中大多数的用户交互都是通过鼠标和触摸屏实现的。

在这篇博文中,我想分享一些JS对于物体移动的常见用法,包括拖拽和投掷效果。…

+ 阅读更多

JavaScript动画详解(三) —— 弹动动画

缓动和弹动都是那对象从已有位置移动到目标位置的方法。但是缓动是指物体滑动到目标点就停下来;而弹动是指物体来回反弹一段时间后,最终停在目标点的运动。…

+ 阅读更多

JavaScript动画详解(二) —— 缓动动画

最普通的动画就是匀速的动画,每次增加固定的值。但是生活中很多运动并不是匀速运动的,而是有加速度改变的运动。在Web动画中,缓动动画有时候会让网站增色不少。…

+ 阅读更多

环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

缘由:

在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度【效果如下图所示】,且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”。当时第一想法是用SVG,因为SVG在画弧线方面是行家呀,另外Canvas也是极好的选择。但是规定了不能用SVG和Canvas,我想还可以使用CSS3的clip和rotate属性,但当时脑抽的我竟记不起clip的语法袅(囧~)。笔试结束后,便去查clip属性的使用,总结了实现环形进度条的方法,于是便有了下文。…

+ 阅读更多

联动的小球——Canvas实现

一天上午起床,脑子里满是联动小球的模拟实验,然后灵光一闪,就想到了用canvas实现之的原理,( ╯□╰ )。然后赶紧下床开始用纸笔理清实现逻辑和定位计算,然后打开电脑coding,一气呵成就是这么嗨森。…

+ 阅读更多

CSS3滤镜特效增强效果

CSS3滤镜种类

CSS3 Filters滤镜效果共有十种特效,分別是:

CSS Filter 特效名称
grayscale 灰度
sepia 褐色老照片色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness
+ 阅读更多

使用srcset + sizes + w标识符实现响应式图片

Tencent前端笔试题竟然考了3道关于srcset + sizes + w标识符实现响应式图片的不定项选择题,当时就蒙了,完全没接触过这种方法来实现响应式图片呐。在此之前的记忆和实践中,一般都是用media…

+ 阅读更多

主流浏览器的内核介绍

浏览器的核心的部分是“Rendering Engine”,可译为“渲染引擎”,不过我们一般习惯称之为“浏览器内核”,负责对网页语法的解释并渲染网页。

渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。…

+ 阅读更多