Canvas 实现炫丽的粒子运动效果(粒子生成文字)

没有最好,只有更好,如题所示,这篇文章只要是分享一个用 Canvas 来实现的粒子运动效果。感觉有点标题党了,但换个角度,勉勉强强算是炫丽吧,虽然色彩上与炫丽无关,但运动效果上还是算得上有点点炫的。不管怎么样,我们还是开始这个所谓的炫丽效果吧! 直接上代码 ,不懂可以看代码注释。估计就会看明白大概的思路了。 HTML代码 (html+css+js) <!DOCTYPE html> <html lang="en"> <h...

2017
11-12

Canvas 动画之多对象边界碰撞运动

前言 学习的道路永远没有尽头,除非……。之前分享过两篇文章《Canvas 动画之多对象运动》和《Canvas 动画之来回运动的小圆》,可以说本文是基于这两篇博文之上做出来的效果。都说一步一个脚印,记录下来了才知道自己当初是怎么走过来的。好了,马上开始今天的分享,老规矩上第二道菜: HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...

2017
11-05

Canvas 动画之多对象自由落体运动

在上一篇文章中分享了《Canvas 实现多对象运动动画》,此次分享的是在它的基础上进行代码修改,实现多个小球作自由落体运动的动画效果。一步一个脚印,记录下来,在自己回过头来看时能清楚地看到 Canavs 之路首阻且长的辛酸史。 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 多对象自由落体运动动画-云库前端<...

2017
11-03

Canvas 动画之多对象运动

前言 之前分享过一篇文章《Canvas 动画之来回运动的小圆》,对于很多朋友而言,这都是小菜一碟。不管怎么说,这都是自己走过的路,记下来也不一定有很大作用,但至少可以给自己一个交代,对于以后都是美美的回忆。本文要分享的是基于上面这篇文章的。但会比上面这篇文章更让人为之动容,不信?咱们走走瞧。 在这里没有过多的话要说,作为一个准前端开发程序员,代码也许就是我对你最冲动的告白。 HTML 代...

2017
11-02

Canvas 征战之旅

前言 Canvas 的使用越来越多,比如百度的 echart.js 就是用canvas 实现的。在没有看到类似 echart.js 这样的惊人效果后,我一直不相信 Canvas 是如此惊艳。为了说服自己在网上也查阅了很多有关于 Canvas 的例子。真的可以很炫。于是就开始了Canvas 之旅,但是本文要说的不是 Canvas 如何如何,而是把在学习 Canvas 时的一些坑也好,技巧也好,或者说是解决方案也罢,都统统记录下来,以便前人种树,后人...

2017
11-01

Canvas 动画之来回运动的小圆

正如标题所说的,本文是要实现一个无限循环运动(直线运动)的小圆。通过本文你可以学到在 Canvas 中最基本的动画制作。这个动画有如下特点: 无限循环运动(上下来回运动) 随机速度 随机加速度 随机的圆大小 随机的圆初始位置 好了,废话不多说,我们真接来看代码,没有代码解决不了的问题: 超简单的HTML (index.html) <!DOCTYPE html> <html lang="en"> <head> <meta...

2017
10-23

Canvas 画圆

HTML 代码(index.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas 画圆 - 云库前端</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <canvas id="canvas"></canvas> <script> var ican...

2017
10-15

本地存储 LocalStorage 封装

看完题目相信你应该知道这篇文章将会是什么样的内容了,对没错,直接贴出代码。下面就是把本地存储 LocalStorage 封装了下,在实践开发中不用第次都要重写一遍或者拷贝一份,要用本地存储时就直接引入 这个 localstorage.js 就可以了。这个文件代码真的不多: 看这里 /* * @Author: 朝夕熊 * @Date: 2017-10-10 21:44:14 * @Last Modified by: 朝夕熊 * @Last Modified time: 2017-10-10 22:32:42...

2017
10-10

H5 中关于 Mate 的基本配置项

做 H5 页面最重要的就是在各大浏览器及各大手机屏幕中做一些兼容设置或者单独设置。下面就是收集一些 H5 页面中的 Mate 配置项: 看这里 <!-- 设置 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" /> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免I...

2017
10-09

Canvas save() 和 restore() 方法

最近因为要实现一些效果(合成图片),所以就接触到了 Canvas 这个HTML5 的新标签。于是二话不说就开始了Canvas 的学习之旅。虽然在项目中使用 Canvas 时没有用到  save() 和 restore() 方法,但是无意间看到了这两个方法。感觉还是的非常地有用,于是就在网上对它们俩进行了人肉搜索。 基本都是这么定义它们的使用的 save() 和 restore() 分别用来保存和恢复 Canvas 状态的。短短的一句话,虽然很明了,但...

2017
10-07

HTML5 Canvas 教程

HTML5 中的 Canvas 可以通过 JavaScript 脚本来绘制一些图形。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px),所有主流浏览器的新版本都支持 Canvas 。 Canvas 基础 下面是 Canvas 的基本用法。 基本套路 HTML <canvas id="tutorial" width="150" height="150">你的浏览器过旧,请升级浏览器或者安装其它现代浏览器!</canvas> <canvas> 标签只有两个属性(width ...

2017
09-28

HTML5 Audio 对象(属性、方法、事件)

首先得先声明一下,这是一篇很无趣的文章,但是却很实用,因为本文把 HTML5 Audio 对象的属性,方法,事件整理出来。方便自己查阅,同时也希望本文能对你有些许帮助。 HTML5 Audio 对象属性 属性 描述 audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。 autoplay 设置或返回是否在就绪(加载完成)后随即播放音频。 buffered 返回表示音频已缓冲部分的 TimeRanges 对象。 control...

2017
01-01

基于HTML5 Audio 开发音乐播放器

因为HTML5 新增了一些很方便的特性,所以HTML5  在前端圈里越来越受到大家的关注,下面就给大家分享一个基本HTML5 audio 属性开发的一个简单的音乐播放器。 HTML5 audio 实例 HTML 代码 <audio id="myMusic" src="./yellow.mp3"></audio> <div class="music-player-box"> <div class="music-info"> <span id="current-time">00:00</span> ...

2016
12-31

html5 page visibility api 用法

前言 如今浏览器的多tab 窗口设计已经很普遍,可以说绝大多数的浏览器都已经默认地使用这种方法来打开网页进而提高用户体验。但因此问题也随之而来-资源的浪费,性能的下降。 在我们平时浏览页面时候,都没不经意地打开很多页面。就拿我自己来说,很多时候可能会同时打开7-8面而,由于工作需要甚至同时打开十几二十个页面也是常有的事。即使页面的数量不能少,那么怎么才能让用户使用了浏览器默认的tab窗...

2016
06-15

移动web福音:HTML 5 应用程序缓存

前言 虽然现在有了4G网络,也快奔5G网络了,但是移动WEB在移动端表现还不是很出色,其中一个最关键的原因就是网速问题,移动端网速才是王道,如果你的移动应用打开得慢了,那么还有谁愿意花几十秒来等你这个网页下载完呢? 不过值得我们高兴的是HTML5给我们带来了一大惊喜:应用程序缓存。其实它的强大之处不是表现在功能上,而是用户体验上。他可以让你的移动WEB页面得到更快的响应以及更加快的展现在用...

2015
11-03

HTML5 Canvas中 fillText() 和 strokeText() 的区别

前言 Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了。这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 strokeText 的区别,代码及效果图片演示。 效果演示 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> <style> canvas{border: 1px solid ...

2015
09-25

HTML5视频(Video)和音频(Audio)类库jplayer

jplayer是什么 jPlayer 是一个通过JavaScript编写的,完全免费的且开源的媒体库。他是一个jQuery插件,jPlayer可以让你在网页上方便快捷地运用跨平台的 audio和video。jPlayer有着全面的API,为你在创建一些有创意的新媒体解决方案提供了可能。这些API由活跃的,在慢慢成长的 jPlayer社区提供支持。 为什么选择jPlayer 1.易用,部署只是分分钟的事。 2.可以通过HTML和CSS实现完全定制和换肤。 3.轻量...

2015
09-14

网页视频播放器插件 Video.js

介绍 Videojs 插件支持 HTML5 视频和 Flash 视频,YouTube 和 Vimeo,他支持PC端和移动端的视频播放。该项目从2010年中旬出现到现在已经超过 50,000 100,000 200,000 网站在使用了。 用法 在的需要插入视频的页面的 head 标签之间像下面这样引入相关文件就可以了 <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/5.8/video.min.js">...

2015
04-15