整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML5和CSS3现在越来越备受网站建设者们的关注，它既简单，且网页版也好看。那么生成器就在自动生成代码时扮演者重要角色，它们非常适用于那些要做很多重复性工作的开发人员和设计人员，生成器可以帮他们解决这些繁琐的工作。在本文中，我们精心挑选了一些经验丰富开发人员和设计人员常用HTML5、CSS3代码生成器。
HTML5代码生成器
网上有五六种可以生成优质代码的HTML5生成器，其中的真谛是HTML5样板文件，我们不要自以为然的把样板文件当成是生成器，虽说这样，大多数开发者还是把它当作是他们第一个网站的模板。回到主题，要找到一个好的HTML5生成器并不是那么容易的事，因为网上有成千上万的网站提供各种各样的代码生成器。正因为如此，我们经常会被搞的稀里糊涂。不过，我们还是设法找到了一些比较好的生成器在本文中分享给大家。
Shikiryu HTML5生成器
Shikiryu HTML5生成器可以让你为应用程序添加一个中介器，而且很多人都喜欢这么用。你可以在模板里面增加特性和修改布局。事实上，这个是非常实用的。开发人员更钟爱这个生成器，因为相比其他的生成器，这个语义性更强，更易懂。
Initializr生成器
如果你要新建一个以HTML5样板文件为基础的项目，这将是你要开始你项目的好工具。它可以生成一个简洁的可自定义的模板。当你从各式各样的框架和类库中选择或是自定义模板时，模板就会以压缩文件的格式下载下来，然后你就可以拿这些代码来设计你的网站了。
Quackit HTML5生成器
Quackit 不仅可以给你提供一系列的代码，还允许你输入你的所有信息。这对初学者非常有帮助。所以，如果一开始你学的是CSS和html，你就可以用这个生成器来简化你的工作任务了。这些生成器可以说是非常棒的，因为它们专注于圆角边框，阴影，颜色渐变以及和html5模板的设计。
Modernizr生成器
Modernizr是一个开源的脚本类库，它可以帮助你建立HTML5和CSS3来使你的网站更强大。这样你就可以创建一些很好的，而且可以完美运行你代码的网站，不管用户用的是什么样的浏览器或是什么样的设备，都能优雅的展现。
CSS 代码生成器
CSS3 Maker
你可以很容易在网上找到这个生成器。一旦你开始用这个生成器，我相信你一定会完全依赖它的。有了它，你可以做很多动画、自定义字体、文本滚动、盒子模型阴影、圆角边框、文字阴影、过渡、渐变等等方面的效果。
me
个人而言，我是很喜欢这个生成器， CSS3.me是由设计师Eric Hoffman设计出来的。它使用起来很简便，是一个轻量级的、个性化而又功能强大的生成器。你可以用它来设置透明度、下拉阴影，改变和设置圆角边框，增加渐变效果等等。
CSS3-Tricks 按钮生成器
这是一个很经典古老的按钮生成器，它是非常线性的，而且没有图形界面。你可以在你的项目中用它来生成没有任何效果的按钮。
图片边框和圆角边框生成器
1.圆角边框生成器（Border-Radius）
这是个非常好的、轻量级的工具，主要拿来设置边角的圆角边框。一旦完成了边角设置，就可以在浏览器上检查你想要包含的前缀，这些都是已经完成了的。是个界面很简洁友好的生成器。
2.图片边框生成器（Border-Image)
假如你要画一个箭头或是一个三角形时，想让生成器把它平铺到你的网站边框或者是元素边框。这是最好用的图片边框生成器，当它要复制图片去找到最合适的边框样式时候。也就是说，届时，你就可以操作设置它的大小、偏移量，可以平铺这张图片等等。开发者经常喜欢拿它来设置背景。
CSS3渐变效果生成器
Color Zilla Gradient 生成器
此编辑器绑定了非常多的特性，用起来也非常容易。你可以单单稍微移动一下画笔就可以观察到他们的变化。它也可以在浏览器上直接使用，非常适合在网页上开发的开发人员和设计人员。
@fontface 生成器
这个生成器可以让你上传网页上的字体或是系统里面的字体。然后生成一个可以拿来用的输出文件。这个生成器给字体属性生成了一个CSS文件，然后字体就可以显示在HTML文件里了。这是一个非常好的检查字体工具，尤其是你没有足够的时间去创建一个使用许多重复性字体的完整的网站时候。
CSS3下拉阴影生成器
Webestools 阴影生成器
如果你想要对下拉阴影效果有更深、更具体的运用，这个生成器是我最强烈推荐的。因为它自带调节栏，外部阴影，内部阴影的设置，还可以设置阴影的颜色，偏移量和很多你意想不到的炫酷效果。
HTML5与CSS3如果协调的好，就会为您减轻部分工作压力，且能节省更多的精力。工具的好坏取决于您怎么去使用/去看待的，希望此篇文章能给您有所本帮！
果细心地观察那些阅读转发破万的H5，它们除了本身极具特色的创意之外，排版与动效功能的应用也是恰到好处。
所以今天我们就分别从【排版】来给大家阐释，如何让自己创作的H5更具传播性。
【注：本文案例均出自www.ih5.cn，国内HTML5云制作服务平台】
canvas 是 HTML5 新增的一个标签, 表示画布
●canvas 也是 h5 的画布技术, 我们通过代码的方式在画布上描绘一个图像
canvas 标签
●向进行 canvas 绘图, 首先我们先要了解到 canvas 标签
●是 html5 推出的一个标签
<html>
<head>
...
</head>
<body>
<canvas></canvas>
</body>
</html>○canvas 默认是一个行内块元素
○canvas 默认画布大小是 300 * 150
○canvas 默认没有边框, 背景默认为无色透明
canvas 画布大小
●我们在绘图之前, 先要确定一个画布的大小
○因为画布默认是按照比例调整
○所以我们调整宽度或者高度的时候, 调整一个, 另一个自然会按照比例自己调整
○我们也可以宽高一起调整
●调整画布大小有两种方案
○第一种 : 通过 css 样式 ( 不推荐 )
<html>
<head>
<style>
canvas {
width: 1000px;
height: 500px;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>○第二种 : 通过标签属性 ( 推荐 )
<html>
<head>
...
</head>
<body>
<canvas width="1000" height="500"></canvas>
</body>
</html>●两种方案的区别
○通过 css 样式的调整方案, 不推荐
是因为这个方案其实并没有设置了画布的大小
而是把原先 300 * 150 的画布, 将他的可视窗口变成了 1000 * 500
所以真实画布并没有放大, 只是可视程度变大了
举个例子 : 就是你把一个 300 * 150 的图片, 放大到 1000 * 500 的大小来看
所以这个方式我们及其不推荐
○通过属性的调整方案, 推荐
这个才是真正的调整画布的的大小
也就是我们会在一个 1000 * 500 的画布上进行绘制
●画布的坐标
○canvas 画布是和我们 css 的坐标系一样的
○从 canvas 的左上角为 0 0 左边, 分别向右向下延伸为正方向
canvas 初体验
●准备工作已经完成了, 我们可以开始体验一下绘制了
●其实 canvas 画布很简单, 就和我们 windows 电脑的画板工具是一样的道理
●思考 :
我们在 windows 这个画板上绘制内容的时候
我们一定是先选定一个工具 ( 画笔, 矩形, 圆形, ... )
设定好样式 ( 粗细, 颜色 )
然后开始绘制
●其实在 canvas 绘制也是一个道理
拿到一个画布工具箱
从工具箱中选定工具
设定样式
开始绘制
●初体验步骤
●index.html
<html>
<head>
...
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
<script src="./index.js"></script>
</body>
</html>●index.js
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle=document.querySelector('#canvas')
// 1. 获取当前这个画布的工具箱
// 语法: canvas 元素.getContext('2d')
const ctx=canvasEle.getContext('2d')
// 2. 开始绘制
// 2-1. 讲画笔移动到一个指定位置开始下笔
// 语法: 工具箱.moveTo(x轴坐标, y轴坐标)
ctx.moveTo(100, 100)
// 2-2. 将笔移动到一个指定位置, 画下一条轨迹
// 注意: 这里是没有显示的, 因为只是画了一个轨迹
// 语法: 工具箱.lineTo(x轴坐标, y轴坐标)
ctx.lineTo(300, 100)
// 2-3. 设定本条线的样式
// 设定线的宽度
// 语法: 工具箱.lineWidth=数字
ctx.lineWidth=10
// 设定线的颜色
// 语法: 工具箱.strokeStyle='颜色'
ctx.strokeStyle='#000'
// 2-4. 描边
// 把上边画下的痕迹按照设定好的样式描绘下来
// 语法: 工具箱.stroke()
ctx.stroke()●至此我们的第一个线段就绘制完毕, 画布上就会出现一条线段
○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )
○线段长度为 200px
○线段宽度为 10px
○线段颜色为 '#000' ( 黑色 )
canvas 线宽颜色问题
●刚才我们经过了初体验, 画了一个线段
●看似没有问题, 也出现了线段, 但是其实内在是有一些问题的
●我们先来观察
●这次我们再来画一个线段
○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )
○线段长度为 200px
○线段宽度为 1px
○线段颜色为 '#000' ( 黑色 )
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle=document.querySelector('#canvas')
// 1. 获取当前这个画布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 开始绘制
ctx.moveTo(100, 100)
// 2-2. 将笔移动到一个指定位置, 画下一条轨迹
ctx.lineTo(300, 100)
// 2-3. 设定本条线的样式
// 设定线的宽度
ctx.lineWidth=10
// 设定线的颜色
ctx.strokeStyle='#000'
// 2-4. 描边
ctx.stroke()●效果出现了, 没有什么问题
●只是看上去不太想 1px, 而且颜色有些浅
●不着急, 我们再来画一个线段
○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )
○线段长度为 200px
○线段宽度为 2px
○线段颜色为 '#000' ( 黑色 )
●这个时候问题就出现了
○两次画出来的线段, 一次设置 1px 一次设置 2px
○感觉上 线宽度 一样
○两次画出来的线段, 两次都是设置为 '#000' 的颜色
○但是感觉上颜色不太一样
●这是因为浏览器在描述内容的时候, 最小的描述单位是 1px
●我们来模拟一下浏览器绘制的内容
○假设这是我们浏览器描述的画布中的像素点
○我们来做一个坐标的标记
○现在呢不关注线的长度和坐标, 我们就画一个宽度为 1px 的线段
○我们来剖析一下问题
因为在描绘这个线段的时候, 会把线段的最中心点放在这个像素点位上
也就是说, 在描述线宽的时候, 实际上会从 0.5px 的位置绘制到 1.5px 的位置
合计描述宽度为 1px
但是浏览器的最小描述为 1px
这里说的不是最小宽度为 1px, 是浏览器不能在非整数像素开始描述
也就是说浏览器没办法从 0.5 开始绘制, 也没有办法绘制到 1.5 停止
那么就只能是从 0 开始绘制到 2
所以线宽就会变成 2px 了
因为本身一个像素的黑色被强制拉伸到两个像素宽度, 所以颜色就会变浅
就像我们一杯墨水, 倒在一个杯子里面就是黑色
但是到在一个杯子里面的时候, 又倒进去一杯水, 颜色就会变浅
○实际描绘出来的样子
○这就变成了我们刚才看到的样子
●所以, 我们在进行 canvas 绘制内容的时候, 涉及到线段的时候
●我们一般不会把线段宽度设置成奇数, 一般都是偶数的
canvas 绘制平行线
●刚才我们绘制了线段, 接下来我们来绘制一个平行线, 也就是两个线段
●小伙伴: " 一个简单的效果, 想到就搞 "
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle=document.querySelector('#canvas')
// 1. 获取当前这个画布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 开始绘制第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
ctx.stroke()
// 3. 开始绘制第二个线段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
ctx.stroke()●没有问题, 效果实现了
●接下来, 咱们稍微增加一下需求
○第一个线段线宽 2px, 黑色
○第二个线段线宽 10px, 红色
●这也简单啊, 稍微修改一下
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle=document.querySelector('#canvas')
// 1. 获取当前这个画布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 开始绘制第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
ctx.stroke()
// 3. 开始绘制第二个线段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=10
ctx.strokeStyle='red'
ctx.stroke()●这是什么鬼, 为什么两个线段都变了, 不是应该只改变一个吗 ?
这是因为我们并没有告诉他这是两个不一样的线段
所以在设置线段样式的时候, 会默认按照最后一次设置的样式来绘制所有的线段
我们要想让第一个线段绘制完毕以后, 和第二个没有关系
我们需要告诉画布, 我的这个线段结束了, 后面的不要和我扯上关系
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle=document.querySelector('#canvas')
// 1. 获取当前这个画布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 开始绘制第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
ctx.stroke()
// 3. 结束之前的绘制内容
// 语法: 工具箱.beginPath()
ctx.beginPath()
// 4.. 开始绘制第二个线段
ctx.moveTo(100, 100)
ctx.lineTo(300, 100)
ctx.lineWidth=10
ctx.strokeStyle='red'
ctx.stroke()●这样才是我们的需求
canvas 绘制三角形
●画完了线段, 咱们就来画一个简单的图形, 画一个三角形
●其实就是由三个线段组成, 用三个线段围成一个封闭图形即可
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle=document.querySelector('#canvas')
// 1. 获取当前这个画布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 开始绘制第一个线段
// 三角形第一个点
ctx.moveTo(100, 100)
// 三角形第二个点
ctx.lineTo(200, 100)
// 三角形第三个点
ctx.lineTo(200, 200)
// 回到第一个点
ctx.lineTo(100, 100)
ctx.lineWidth=2
ctx.strokeStyle='#000'
// 描边
ctx.stroke()●看似没啥问题, 一个三角形就出来了
●但是我们仔细观察一下三角形的第一个角
●因为这是两个线段, 只是画到了一个点, 不可能重叠出一个 尖儿~~
●这个时候, 我们就不能这样绘制三角形了
当我们要绘制闭合图形的时候
我们不要手动绘制最后一个路径, 而是描述出形状
通过 canvas 让他自动闭合
●首先, 我们绘制出形状, 不要闭合最终路径
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle=document.querySelector('#canvas')
// 1. 获取当前这个画布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 开始绘制第一个线段
// 三角形第一个点
ctx.moveTo(100, 100)
// 三角形第二个点
ctx.lineTo(200, 100)
// 三角形第三个点
ctx.lineTo(200, 200)
ctx.lineWidth=2
ctx.strokeStyle='#000'
// 描边
ctx.stroke()●接下来, 让 canvas 来帮我们闭合这个封闭图形
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle=document.querySelector('#canvas')
// 1. 获取当前这个画布的工具箱
const ctx=canvasEle.getContext('2d')
// 2. 开始绘制第一个线段
ctx.moveTo(100, 100)
ctx.lineTo(200, 100)
ctx.lineTo(200, 200)
// 自动闭合图形
// 语法: 工具箱.closePath()
ctx.closePath()
ctx.lineWidth=2
ctx.strokeStyle='#000'
// 描边
ctx.stroke()●这个时候, 我们发现一个正常的三角形就出现了
●注意 : 闭合路径
closePath() 这个方法
是从当前坐标点, 直接用线段的方式连接到 modeTo() 的位置
也就是从当前坐标点直接连接到开始坐标点
*请认真填写需求信息，我们会在24小时内与您取得联系。
