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

分类:HTML & HTML5

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

摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。
在像素数据分析和将画像转成图片,则应将视频流导到canvas中,使用canvas API中进行数据提取。

在这里,我使用了一个隐藏…

+ 阅读更多

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

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

这个组件包含进度条拖拽,支持自定制audio的样式。体验如下:

直接上代码:

组件代码:

/*
* 音频组件
* options参
+ 阅读更多

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

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

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

// HTML: 
<div style="width: 500px; height: 300px;">
    <video src="test.mp4" controls></video>
</div>

这在Android系统…

+ 阅读更多

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

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

这(“▔□▔) Σ<(=~д~=!)> (~▽~”) (~_~|||) – … …

一般来说,这个action链接都是处理表单并返回一些文本信息的Controller函数,以空白…

+ 阅读更多

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

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

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

代码如下:

<p>Canvas:</p>
<canvas id="canvas" style="border: 1px solid #ccc;"></canvas>
<br>
<p>Base64转码后的图片:</p>
+ 阅读更多

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

一. 事起缘由

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

一倍屏下的显示情况:

image_1au479vu344r18fqg3b74a4859.png-7.2kB

二倍屏下的显示情况:

mohu.png-12.3kB

正当我很开心的准备发布出去时,用Mac Book 开发的同事跟我说,这简直是糊得不要不要的呀~( ╯□╰ )~。。纳尼可是我的华硕显示十分完美呀,这就十分尴尬了。

猜想是Canvas毕竟类似于位图,在Retina屏下如果不做多倍屏显示处理的话,图片应该会模糊。Google了一翻,果然如此。

二. 问题分析

+ 阅读更多

HTML5读取拖放的本地文件

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

例子:

<!DOCTYPE HTML>
<html>
<head>
    <style
+ 阅读更多

学习笔记:HTML5的拖放 API

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

默认情况下,图像、链接和文本是可以拖动的。文本只有在被选中的情况下才能拖动,而图像和链接在任何时候都可以拖动。

HTML5为所有的HTML元素规定了一个draggable属性,表示元…

+ 阅读更多

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

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

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

一. 使用方法:

1.1 引入组件资源

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

<link rel="stylesheet" type="text/css"
+ 阅读更多

HTML5 拖放API 学习笔记整理

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

HTML5的拖放API的兼容性如下:

http://caniuse.com/#feat=dragndrop

+ 阅读更多

Canvas API 语法整理

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

canvas元素

canvas元素的属性有width和height。方法有以下三个:
|方法|说明|
|–
|getContext()|返回与该canvas元素相关的绘图环境变量。属性值有"2d"和"3d"。|
|toDataURL(type, quality)|返回一个数据地址(data URL),可以将其设定为img元素的src属性值。第一个参数指定了图像的类型,如"image/jpeg"或"image/png&q…

+ 阅读更多

JavaScript用户交互:移动物体

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

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

一. 使用鼠标事件

可以将一个鼠标单击事件分解成两个事件:鼠标按下事件和按键弹起事件。通常情况下这两个事件是同时发生的。不过,有时鼠标按下后,鼠标还会移动一段时间才弹起,这种操作称为拖曳,即按下、移动、在释放。

在canvas动画中,…

+ 阅读更多

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

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

弹动,大多数时候,物体的加速度与它到目标点的距离是成比例的。

来看一个在现实中弹动的例子:在橡皮筋的一头系上一个小球,另一头固定起来。小球的目标点就是它初始静止悬空的那个位置点。将小球拉开一小段距离然后松开,刚松手那一瞬间,它的速…

+ 阅读更多

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

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

在CSS3中可以使用ease, ease-in, ease-out, ease-in-out 或者 cubic-bezier(n,n,n,n)来实现缓动动画。而且目前也有一些jQuery封装了缓动动画的Move.js, Velocity.js和Tween.js等。在实际项目中使用这些库文件或者CSS3属性可以大大…

+ 阅读更多

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

缘由:

在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度【效果如下图所示】,且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”。当时第一…

+ 阅读更多

联动的小球——Canvas实现

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

实现的基本思路是将小球的当前坐标用小球位置数组记录。每一次位置变动都将小球的新位置重新写入…

+ 阅读更多

常用的meta整理笔记

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 —— W3School

meta标签是HTML语言head区的一个辅助性标签,用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。它提供的信息虽然用户不可见,但却是文档的最基本的元数据。

meta标签

+ 阅读更多

HTML中src和href的区别

老是一不小心就搞混src和href,所以查资料,作此总结。

一. 请求资源类型不同

src:是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素;
href:是Hypertext Reference的缩写,指向网络资源所在位置,建立和…

+ 阅读更多

HTML5新增标签 学习总结

最近每次笔试都栽在这上面表示坑shi人啦啦啦~~~~记不住哇,这么多的标签记不住哇~。好吧,吐槽完毕。作为一名志于体面的页面仔,冷静下来,良心发现还是应该好好总结下这个基本知识的。

HTML5新增加标签的优势:语义性好,有利于SEO,代码少。

一. 新增的标签

HTML5新增的标签可以查看[《HTML 参考手册》——by W3CSchool][1]
新增的标签主要分为以下6类:

类别 元素
结构元素 header, footer,
+ 阅读更多

浏览器模式和文档模式 学习笔记

模式的触发方式

浏览器根据DOCTYPE是否存在以及使用的DTD声明来选择要启动的文档模式。

混杂模式的触发方式

  1. 没有doctype声明;
  2. 在页面的第一行添加XML声明如"",在IE6下会触发混杂模式;
  3. 前面有空格或注释;

准标准模式的触发方式

  1. 加DOCTYPE声明,比如:
  1. 设置X-UA-Compatible触发;

触发标准模式

文档模式的检测

+ 阅读更多

SVG绘图(二) —— 渲染满天星辰

看到一些炫酷的动画,总有种好想实现它,但是又无奈于腹中的代码量略少,只好不明觉厉,圆圆的大眼睛里满是对新事物的渴求。

在网页中嵌入动画,过去比较流行采用Falsh、Java Applet和微软的SilverLight,但他们的网页安全性、兼容性、难操作性以及文件的大小等缺陷让很多Web开发者又爱又恨。Gif依旧是个不错的选择,但遗憾的是并不能用DOM操控其中的元素。自从有了SVG、HTML5和CSS3,一些简单的平面动画的实现变得方便和简单,虽然他们在一些方面譬如兼容性和…

+ 阅读更多

SVG绘图(一)—— 线条逐帧动态渲染

相信大家都见过这样的神奇技术:一根线条构成的画能自动逐帧描绘自己,特么炫酷。这种技术用Flash和AE等工具来实现的话不算难事,可惜所得文件略大。在本文中,想介绍一种稍微高那么一点逼格的实现方法,用纯codes写。所用到的技术是 SVG + CSS3。

首先,你得明白SVG是啥东东。再次,你得知道CSS3自定义动画实现方法。

SVG (Scalable Vector Graphics ),可伸缩的矢量图形,在浏览器中改变尺寸,其图形质量不会有所损失。相比其它位图,SVG图像文件更…

+ 阅读更多

【笔记】SVG性能优化

一. SVG的优化
1. 把一些要重复使用的元素都写在元素里。的子元素在文档解析的时候也不会渲染,只有在引用的时候才渲染,所以这样就可以做到一次解析,处处渲染,而不是每次使用的时候都解析一次,渲染一次,从而提高了SVG的性能。
2. 使用内部的CSS样式表的渲染速度,要比使用外部的CSS样式表更快。
3. 在元素的属性x, y, width, height使用百分比的紧致界,能够将需

+ 阅读更多