HTML5

canvas 实现 github404动态效果的示例代码

前几天使用css样式和js致敬了一下github404的类似界面,同时最近又接触了canvas,本着瞎折腾的想法,便借着之前的js的算法,使用canvas来完成了github404的动态效果。 效果图 文件目录 文件资源 文件源码与图片在文章末尾给出 代码 网页的body部分 这里给canvas 定义好宽和高,设为块级元素。这些img 标签是将这些图片加载出来,我们就不用在js中去加载了,再将图片... »

深入研究HTML5实现图片压缩上传功能

上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起。虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢,图片压缩。受以前PC上的开发思维影响,尼玛js哪有权限去操作文件,哪有资格压缩图片啊,搞不了,你们客户端去整吧。只能说自己还是有些井底之蛙了。在HTML5的影响下,前端能干的事情越来越多了,开发的功... »

angular ng-submit默认使用方法

使用html2canvas.js实现页面截图并显示或上传的示例代码

最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下。 在使用html2canvas时可能会遇到诸如只能截取可视化界面、截图没有背景色、svg标签无法截取等问题,下面详细的说明一下。 一、导入html2canvas.js 这个不需要多说,可以从github上获取: https://github.com/niklasvh/html2canva... »

简单整理HTML5的基本特性和语法

HTML5 也是一种在万维网上构建和呈现内容的标准。下面是 HTML5 引入的主要特性:新的语义化元素: 比如 , 和 。微数据: 允许我们创建 HTML5 之外的自定义词汇表,以及使用自定义语义扩展网页。向后兼容HTML5 被设计为尽可能的对现有浏览器向后兼容。建议使用少量的 JavaScript 代码检测单个 HTML5 特性的支持度。但是 HTML5 更具灵活性,支持下列形式:标签名大写。 »

基于HTML5的WebGL经典3D虚拟机房漫游动画

第一人称在 3D 中的用法要参考第一人称在射击游戏中的使用,第一人称射击游戏(FPS)是以第一人称视角为中心围绕枪和其他武器为基础的视频游戏类型;也就是说,玩家通过主角的眼睛来体验动作。自从流派开始以来,先进的3D和伪 3D图形已经对硬件发展提出了挑战,而多人游戏已经不可或缺。 Doom的截图,这个流派的突破游戏之一,展示了第一人称射击游戏的典型视角 现在博物馆或者公司也经常使用到 3D 动画做宣... »

angular ng-submit默认使用方法

HTML5 本地存储 LocalStorage详解

说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示:   最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家 都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。 userDat... »

Canvas globalCompositeOperation

在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。 简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的 globalCompositeOperation 操作,可以得到不同的效果,比如下图: 正如上图,红苹果和黑色的圆,通过 globalCompositeOperation 的 desti... »

HTML5实现预览本地图片

问题描述假设我们在 HTML 里面有一个图片上传控件: 复制代码代码如下:<input id=”upload_image” type=”file” name=”image” accept=”image/*” /> 注意这个 accept="image/*" 非常重要,它指... »

angular ng-submit默认使用方法

Adobe Html5 Extension开发初体验图文教程

一、背景介绍 Adobe公司出品的多媒体处理软件产品线较多,涵盖了音视频编辑、图像处理、平面设计、影视后期等领域。为了扩展软件的功能,Adobe公司为开发者提供了两种方式来增加软件的功能:分别是插件(Plugin)和扩展(Extension)。去年利用官方提供的SDK开发过两款Premiere插件,分别用于导入自定义格式的多媒体文件和视频流预览。近来体验了一下Adobe Extension的开发。... »

HTML5拍照和摄像机功能实战详解

开篇 最近在做一个chrome app的云相机应用,应用包括拍照、摄像、保存照片视频、上传文件等等核心功能,其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的,其一是总结梳理知识点,最重要是希望对有相关需求的读者提供一些指导。 注:本篇文章以实战为准,理论知识不做过多介绍。 拍照 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头、视频、音频、地理位置等)的... »

手对手的教你用canvas画一个简单的海报的方法示例

啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后,如何生成这张海报呢~~~ 首先我们老大告诉我有一个插件叫html2canvas、其作用就是可以将dom节点转化成图片,是个不错的东西。我试验了下、确实可以,但~这个插件有点大啊,为了满足海报的这个需求引入这么大的东西感觉很亏!!!所以,还是自己画一个~ 首先先... »

angular ng-submit默认使用方法

HTML5新特性之用SVG绘制微信logo

HTML5新特新 HTML5 中的一些有趣的新特性: 1、用于绘画的 canvas 元素 2、用于媒介回放的 video 和 audio 元素 3、对本地离线存储的更好的支持 4、新的特殊内容元素,比如 article、footer、header、nav、section 5、新的表单控件,比如 calendar、date、time、email、url、search SVG绘制图片效果图: 代码如下... »

html5中canvas图表实现柱状图的示例

前几天用到了图表库,其中百度的ECharts,感觉做得最好,看它默认用的是canvas,canvas图表在处理大数据方面比svg要好。那我也用canvas来实现一个图表库吧,感觉不会太难,先实现个简单的柱状图。 效果如下: 主要功能点包括: 文本的绘制 XY轴的绘制; 数据分组绘制; 数据动画的实现; 鼠标事件的处理。 使用方式 首先我们看一下使用方式,参考了部分ECharts的使用方式,先传入要... »

解锁canvas导出图片跨域的N种姿势小结

本文介绍了解锁canvas导出图片跨域的N种姿势小结,分享给大家,具体如下: Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 上面这个错误相信大家用canvas执行 to... »

html5+css如何实现中间大两头小的轮播效果

html5+css如何实现中间大两头小的轮播效果

国际惯例,先上效果 好了,话不多说,上去就是一顿撸。 css: <style> *{margin: 0;padding: 0} .wrap{ } .container{ width: 100%; overflow: hidden; /* height: 400px; */ background: red; position: relative; } .box{width: 125%; ... »

HTML5未来发展趋势

2013年5月6日, HTML 5.1正式草案公布。而随着HTML5标准的发展,两者之间的差异已经逐渐变得模糊,今天各大媒体都争相报道与HTML5有关的东西,那么,HTML5未来的发展趋势到底是什么?2) 游戏开发者领衔“主演” 其实移动游戏开发商是从HTML5获益最多的一方,他们可利用这个平台逃脱付费游戏须向苹果支付的30%提成。HTML 5开发领域的领军人物包括Senc... »

canvas之自定义头像功能实现代码示例

写在最前: 前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的,没有安装过的还得手动去“允许”falsh的运行。所以让我用canvas实现一个一样的功能,嘿嘿,刚好最近也在研究canvas,所以欣然答应(其实,你没研究过难道就不答应么,哈哈哈哈哈~) 成果展示: Git地址:https://github.com/ry928330/portraitDIY 功能说... »

详解canvas绘制多张图的排列顺序问题

在开发中,如果遇到需要使用canvas同时绘制多张图片,但因为图片大小的不一样,排在数组前面的图片不一定能先被load然后绘制,就可能会导致画出来的图的排列顺序和预想的不一样(特别是因为跨域加了域名重定向的图片尤为明显),我的解决办法是:先全部画出来再排序再append到需要的节点里去。 <div id="myContent"></div> let im... »

angular ng-submit默认使用方法

Html5 Canvas动画基础碰撞检测的实现

在Canvas中进行碰撞检测,大家往往直接采用游戏引擎或物理引擎内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?检测当前鼠标在canvas上的移动并将鼠标位置更新到B的位置属性中。'); } if rectA.draw; rectB.draw;}3、初始化新建Init.js ,获取canvas元素并绑定鼠标移动检测,初始化Rect对象A和B,最后开启动画循环。 »

angular ng-submit默认使用方法

详解HTML5中的Communication API基本使用方法

1.跨文档消息通信跨文档消息通信可以确保iframe、标签页、窗口间安全地进行跨源通信。它把postMessage API定义为发送消息的标准方式。利用postMessage发送消息非常简单,代码如下所示:chatFrame.contextWindow.postMessage(‘Hello,world’,’http://www.example.com’... »

html5使用canvas绘制文字特效

<canvas id="canvas" width="500" height="400" style="background-color: yellow;"></canvas>  复制代码代码如下:var canvas=document.getElementById(“ca... »

canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法

我们要绘制一张图片,内容包括一张背景图和一个动态生成的二维码,前提是背景图是项目本身的静态资源,二维码是服务端动态生成的,二者不在同一域名下。 解决办法:把所有图片都重定向同一个域名下: let count = 0; let bgImg = document.creatElement('img'); let qrImg = document.creatElement('img'); bgImg.s... »

canvas压缩图片以及卡片制作的方法示例

在做一些活动页的时候,经常会有一些需要上传图片的需求,并且还需要将图片以及生成的文字以及贴图生成一张卡可以供用户可以长按保存。这个需求之前完成过一次,最近又遇上了,使用的都是canvas来实现的。干脆整理出一篇博客出来。如果有更好的实现方法,欢迎提出一起探讨。 使用canvas压缩图片 在html中使用写入input标签,type为file时候,可以调出手机的相册可供选择照片,也可以支持摄像头进行... »

HTML5中的音频和视频媒体播放元素小结

音频和视频的编码/解码器是一组算法,用来对一段特定的音频或视频流进行编码和解码,以便音频和视频能够播放。编解码器可以读懂特定的容器格式,并且对其中的音频轨道和视频轨道解码。 »

5分钟实现Canvas鼠标跟随动画背景

关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧 gitHub传送门 前言 相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到自己的个人网站上,会让整个网站变得与众不同!   下面我会直击重点,用最短的时间,使用 Canvas 制作 鼠标跟随动画  如何制作动画 常用的绘图动画的方式有... »

Page 1 of 53123»