html5 canvas移动浏览器上实现图片压缩上传

2017-05-06 11:42:48|132次阅读

最近在移动端设计头像上传功能时，原本是以input type=file直接通过formData上传，然而实际使用情况是：对于过大的图片（高像素手机所拍摄的照片等）上传时间过长会导致上传失败，而每次都上传原始大小的图片（后台处理压缩）十分影响用户体验，所以研究了一...

所属栏目:html5教程

标签:html5,canvas,移动,浏览器,实现,图片,压缩,上

HTML5 canvas实现移动端上传头像拖拽裁剪效果

2017-05-06 11:42:46|158次阅读

本示例使用HTML5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全： 下图为裁剪后的效果： html部分： XML/HTML Code 复制内容到剪贴板 JavaScript部分： JavaScript Code 复制内容到剪贴板 以上就是本文的...

所属栏目:html5教程

标签:HTML5,canvas,实现,移动,上传,头像,拖拽,裁剪

通过HTML5 Canvas API绘制弧线和圆形的教程

2017-05-06 11:42:41|101次阅读

在html5中，CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法，请参考以下属性和方法介绍： JavaScript Code 复制内容到剪贴板 arc(x,y,radius,startRad,endRad,anticlockwise) 在canvas画布上绘制以坐标点(x,y)为圆心、半径为radius的圆...

所属栏目:html5教程

标签:通过,HTML5,Canvas,绘制,弧线,形的,教程

利用HTML5 Canvas制作键盘及鼠标动画的实例分享

2017-05-06 11:39:27|181次阅读

键盘控制小球移动 众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新...

所属栏目:html5教程

标签:利用,HTML5,Canvas,制作,键盘,鼠标,画的,实例

使用HTML5中的contentEditable来将多行文本自动增高

2017-05-06 11:39:24|93次阅读

contentEditable是由微软开发、被其他浏览器反编译并投入应用的一个全局属性。该属性的主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。contentE...

所属栏目:html5教程

标签:使用,HTML5,中的,contentEdita,多行

HTML5+CSS3绘制锯齿状的矩形

2017-05-06 11:39:21|161次阅读

最近通过敲Html5+Css3，分享一些自己认为值得学习的知识，分享给大家。 如何绘制一个锯齿状的矩形：如图 我们知道绘制图形可以用canvas ，canvas是HTML5出现的新标签，用于在网页上绘制图形，H5的canvas使用Javascript在网页上绘制图形。 如上锯齿状的矩形，...

所属栏目:html5教程

标签:HTML5+CSS3,绘制,锯齿状,矩形

逼真的HTML5树叶飘落动画

2017-05-06 11:39:17|159次阅读

这款HTML5树叶飘落动画是基于webkit内核的，也就是说要在webkit内核的浏览器上才能使用这款动画。 源码下载 演示地址 HTML代码 XML/HTML Code 复制内容到剪贴板 CSS代码 CSS Code 复制内容到剪贴板 JavaScript代码 JavaScript Code 复制内容到剪贴板 以上就...

所属栏目:html5教程

标签:真的,HTML5,树叶,飘落,动画

谈一谈HTML5本地存储技术

2017-05-06 11:39:14|109次阅读

本地缓存是HTML5出现的新技术，这个技术的出现使得移动web的开发成为了可能。我们都知道，要想打造一个高性能的移动应用，速度是关键。而在HTML5之前，只有cookie能够存储数据，大小只有4kb。这严重限制了应用文件的存储，导致web开发的移动应用程序需要较长...

所属栏目:html5教程

标签:一谈,HTML5,本地,存储,技术