正在迅速改变创建和管理网站的方式。HTML5
在不同的领域让网页设计更强大的。快、安全、响应式、互动和美丽,这些优点吸引更多的
Web
开发人员使用
HTML5
开发各种网站和应用程序。
本文收集的20款优秀的
HTML5
Web
应用程序,值得添加到您的
HTML5
的工具箱中,他们能够帮助你开发前端项目更快、更容易。
Initializr
Initializr
是一个可以让你创建
HTML5
模板的网站,可以创建样板
HTML5
模板,响应式的
HTML5
模板或
Bootstrap
HTML5
模板。
HTML5
Demos
这里集合了一些基于
HTML5
的优秀的实验演示,最初只有5个演示,后来逐渐扩充。
HTML5
Test
想知道桌面或移动
Web
浏览器符合最新的
HTML5
标准吗?这个网站可以帮助测试出分数和评级。
HTML5
Canvas
Cheat
Sheet
如果你不能记住所有
Canvas
的命令和选项,那么这个小抄是绝对适合你。可作为一个图形或
免费下载。
Lime
JS
LimeJS
是一个
HTML5
游戏开发框架,用于快速构建运行于触屏设备和桌面浏览器的游戏。
HTML5
Reset
HTML5
Reset
是一组文件,包括
HTML、CSS
等,用于在开始新项目的时候帮助你节省时间,提供
HTML5
的空白WordPress模板。
SpriteBox
Spritebox
是一个所见即所得的工具,帮助
Web
设计者迅速而轻松地从一张精灵图片(CSS
Sprit
Image)创建CSS类和ID选择符样式。
LimeWeave
LimeWeave是一个
HTML5
编辑器,它可以告诉你什么的
HTML5,CSS
和
JavaScript
特效的样子。
99
Lime
如果你想节省时间,使用
HTML5,CSS
和
jQuery
创建一些新的元素,布局和代码,那么99
Lime
真的可以帮助你。
On/Off
FlipSwitch
如果你曾经想创建一个漂亮的on/off开关,那么这个网站可以帮助你。您可以自定义图形开关,不同的着色,大小和风格。
CanvasLoader
Creator
这个免费的在线工具可以帮助设计师和程序员为他们的
HTML5
项目生成基于
Canvas
的
Loading
效果。
Create
–
Make
Anything
Editable
Create
是一款可以在
CMS
中使用的编辑器。借助
HTML5
特性,可以把页面上的内容变成可编辑区域。
Online
3D
Sketch
Toy
这个绘图工具对于孩子而很好玩,而不只是给网站设计师用!还可以把您的小创作分享到
上。
canvas能做什么?canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令,你可以用canvas创建丰富的web应用程序。如果你想很好的使用canvas,你首先应该很好的掌握javascript。
这篇文章是一篇基础教程,你能了解一些设计方法。比如用HTML5 canvas 进行图形设计。
用HTML5 canvas设计
设计和开发一个web页面会包含很多的内容,用户首先需要有一个支持HTML canvas的浏览器。
首先创建一个HTML5文档页面,设置document type是HTMl5的;
其次在页面body区域添加一个canvas标签:
<canvas></canvas>
第三、给这个canvas定义一个id属性,这样方便我们在js中调用它。添加一个宽和高属性,在canvas标签中添加一个当浏览器不支持的时候显示给用户的内容。下面是列子代码:
<canvas id="canvastest" width="500" height="600">
<p>你的浏览器不支持HTML5 canvas,请更新您的浏览器!</p>
</canvas>
现在我们创建了一个包含HTML5 canvas 元素的空白画布,我们将使用js和canvas元素的方法来创建我们的图像。
添加一个javascript用HTMl5 canvas的方法:
var canvasTest=document.getElementById('canvastest')//获取canvas元素;
var testcontext=canvasTest.getContext('2d')
使用javascript来创建你的画布,你可以使用矩形、圆圈和三角形,并使用线、幻灯片和渐变来创建你的设计。
下面是完成的代码:
var canvasTest=document.getElementById('canvastest')
var testcontext=canvasTest.getContext('2d')
// create rectangle
testcontext.fillStyle='rgb(0,125,125)'
testcontext.fillRect(10,10,250,180)
// create circle
testcontext.beginPath()
testcontext.arc(300, 340, 100, 0, Math.PI * 2, true)
testcontext.closePath()
testcontext.fillStyle='rgb(75,10,125)'
testcontext.fill()
testcontext.stroke()
我们可以将上面的代码加入window.onload,或者jQuery的ready方法里,当文档加载完,将会创建文明的图形。
一些HTML5 canvas 图像解决方案
用与HTML5 Canvas元素你可以开发动态绘图对象比如如可视化信息或数据图。HTML5 canvas 可以在javascript的帮助下很容易的绘制二维图形。让我们来看一下HTML5 canvas元素的一些数据图应用。
1. HumbleFinance
HumbleFinance是用js开发的一个开源的数据可视化图表,它用HTML5 canvas生成可视化图表数据,它可以用一个轴来展示任何两个二维的数据集。
地址: http://www.humblesoftware.com/finance/index
2.Graphr
Graphr是一个用HTML5 canvas写的一个计算器应用,有每个图像计算器应有的基本功能。
地址:http://www.graphr.org/
3.用HTML5和jQuery创建的华丽的动画饼图
你可以用javascript和HTML5来创建一个交互式饼图,有华丽的动画效果。这在之前只能用flash来完成,现在也可以使用最新的HTML5技术了。
地址:http://cyberpython.github.com/AwesomeChartJS/
4. AwesomeJS
AwesomeJS 能够让你创建简单有用的图表,而仅需几行代码即可。这是一个基于HTML5和canvas的javascript库。
地址:http://cyberpython.github.com/AwesomeChartJS/
5.Ticker Plot(股票图)
Ticker Plot(股票图)是每一个在工作是使用图标的web开发人员都必备的一个图表工具。这是一个开源的项目,它使用HTML5 canvas在画布上绘制图形符号和鼠标事件。Ticker Plot(股票图)是专门为股票行情和技术分析设计的。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)