整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前，HTML5技术已经慢慢的成熟了，也被众多用户所接受。在未来的网站大潮中，这种新技术会慢慢取代一些陈旧的技术，给网站带来更多改变，给用户带去更多体验。在下面的内容中，小编会将HTML5技术做下详细的说明，以便大家可以随时掌握。
首先我们来了解下，HTML5给我们的网站带来了哪些改变。
1.现在很多浏览器已经不兼容Flash动画了，有时候我们使用移动设备进行网站浏览时，会造成有些动画不显示，使用最新技术可以解决这个问题，兼容性也很好。
2.当我们使用手机浏览网站时，如果没有移动端网站，那么就会造成网站严重变形，如果使用HTML5技术设计网站，可以更好的解决手机和电脑的显示问题，自动适应各种屏幕的大小，提高网站体验度。
同样的这种新技术也存在一一些缺点，比如网站的开发成本会比普通的程序高，有时候内容无法同步管理，搜索引擎上的排名目前不是很友好，会出现不收录或排名不稳定等情况。如果遇到网站需要改版，HTML5升级时会造成一些麻烦，也许需要重新设计开发。
不过，在未来的网络发展趋势下，HTML5技术会越来越成熟，选择这种技术后我们不用再去单独制作几个版本的网站，这种技术可以更好的自适应，满足了用户的浏览需求，给大家节省了不小的成本。
文章出自畅想网络，原创转载地址：http://www.e-wkj.cn/xw/2151.html
随着互联网+的深入发展，我们已经越来越感受到它的强大，HTML5也随着互联网火了半边天，微信小程序、虚拟现实已经走进了我们生活，这又引发了一次互联网发展高潮。现在互联网企业对高端HTML5开发工程师的缺口依然很大，因此很多人抓住这个机会选择学习HTML5开发。今天千锋南京HTML5培训小编将带大家一起看一看HTML5有哪些知识需要你了解？准备入门HTML5的新手需要了解的知识有哪些？
HTML5到底是什么？
一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分，而不只是第一印象仅仅HTML部分而已，在CSS 3和JavaScript层面也有许多的创新，让整个网页从布局到处理都更加给力，新囊括的技术让之前实现相当困难且安全性危机重重的功能变为了现实，
HTML5好处-为什么要用HTML5
HML5在布局上更得体，记得以前的主流table过渡到主流div;今的布局对搜索引擎更加友好，比如<article>内总是会包含文章内容，而nav是导航信息;HTML5的移动手机支持也日趋完善，兼容移动端可是一个简单概念。虽然多网合一，兼容问题永远存在，布局适配也是一门技术活;另外在Pad等其他客户端也发挥着越来越重要的优势。
HTML5的技术组成：
离线功能
HTML5透过JavaScript提供了数种不同的离线储存功能，相对于传统的Cookie而言有更好的弹性以及架构，并且可以储存更多的内容。
WebStorage – 比Cookies更大、更有弹性的的储存
Web SQL Database – 本地端的SQL资料库
Indexed DB – Key-value的本地资料库
Application Cache – 将部分常用的网页内容cache起来
即时通讯
以往网站由于HTTP协定以及浏览器的设计，即时的互动性相当的受限，只能使用一些技巧来「模拟」即时的通讯效果，但HTML5提供了完善的即时通讯支援。
什么轮询、第三方的统统不要，自已来实现。
WebSocket – 即时的socket连线
Web Workers – 以往JavaScript都是single thread，透过Worker可以有多个运算
Notifications – 塬生的提示讯息，类似像OS X的Growl提示
文件以及硬件支持
不知道大家有没有发现，在Gmail等新的网页程式当中，已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Drag’n Drop和File API。
Drag’n Drop – HTML元素的拖拉
File API – 读取使用者本机电脑的内容
Geolocation – 地理定位
Device orientation – 手持装置的方向
Speech input – 语音输入
语意化
语意化的网路是可以让电脑能够更加理解网页的内容，对于像是搜寻引擎的优化(SEO)或是推荐系统可以有很大的帮助。
New tags – 新的标籤，像是<header>、<section>等
Application tags – 也是新的标籤，像是<meter>、<progress>等
Microdata – 加入语意的资料让搜寻引擎等网站可以正确显示
Form type – <form>可以加入的type便多了，包含email和tel等属性，浏览器会协助进行资料格式的验证
多媒体
Audio、Video的标签支援以及Canvas的功能应该是大家对于HTML5最熟悉的部份了，也是许多人认为Flash会被取代的主要原因。
Audio video – 影片和音乐的塬生播放支援
Canvas – 2D的绘图功能支援
Canvas 3D – 3D的绘图功能支援
SVG – 向量图支援
CSS 3
CSS3支援了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。
Selector – 更有弹性的选择器
Webfonts – 嵌入式字体
Layout – 多样化的排版选择
Stlying radius gradient shadow – 圆角、渐层、阴影
Border background – 边框的背景支援
Transition – 元件的移动效果
Transform – 元件的变形效果
Animation – 将移动和变形加入动画支援
JavaScript
在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。
DOM API – 更方便的查询DOM元件
History API – 浏览器的上下页内容修改，方便AJAX可以保留浏览记录
现在就用HTML5
截至目前而言，主流的网页浏览器Firefox 5、Chrome 12和Safari 5都已经支援了许多的HTML5标準，而且目前最新版的IE 9也支援了许多HTML5标準。随着使用者陆续升级到新版的浏览器，开发者应该在现在就可以着手开发!兼容性问题会随着时间的推移而越来越少。但对于不得不照顾底版本用户的网站，网上也有大量的回退解决方案。
以上就是千锋南京HTML5培训小编今天给大家带来的新手入门HTML5需要了解的知识，希望本篇文章能够对你有所帮助。想了解更多HTML5相关资讯欢迎关注千锋南京官网，这里不仅有更多HTML5相关信息，还有专业的HTML5技术文章、教程视频。
将一个图形绘制在另一个图形之上，图形效果会受制于图形的绘制顺序，可利用globalCompositeOperation属性组合图形，前面绘制贝塞尔曲线时，我就已经用过这个属性了，绘制了多条凡尔赛曲线，组合成了一个图形。
利用globalCompositeOperation属性在已有图形后面再画新图形，还可遮盖、清除（比clear方法强劲的多）某些区域。
语法格式：
globalCompositeOperation=type;
type属性值
source-over 默认设置，新图形覆盖在原图形上。
destination-over 在原有内容之下绘制新图形
source-in 新图形仅出现在与原图形重叠的部分，其他区域部分变透明
destination-in 原有内容中与新图形重叠的部分将会被保留，其他区域变透明
source-out 新图形与原有图形不重叠的部分会被绘制出来
destination-out 原有内容中与新图形不重叠的部分将会被保留
source-atop 新图形与原有图形重叠的部分会被绘制出来，并覆盖于原有内容之上
destination-atop 原有内容中与新图形重叠的部分将会被保留，并会在原有图形之下绘制新图形
lighter 两图形中重叠部分做加色处理
darker 重叠部分做减色处理
xor 重叠部分变透明
copy 只有新图形会被保留，其他的都被清理掉
1 <h3>绘制图形组合</h3>
2 <canvas id="canvas4" style="border:1px solid blue;">
3 Your browser does not support the canvas element.
4 </canvas>
5
6 <script type="text/javascript">
7 var c=document.getElementById('canvas4');
8 var context=c.getContext("2d");
9
10 var opt=new Array("source-over","destination-over","source-in","destination-in","source-out","destination-out","source-atop","destination-atop","lighter","darker","xor","copy","and");//数组存储type属性
11 var i=1;//让i从0到12变化，查看每个属性值的效果
12 context.fillStyle="blue";
13 context.fillRect(10,10,60,60);
14 context.globalCompositeOperation=opt[i];
15 context.beginPath;
16 context.fillStyle="rgba(255,0,0,0.25)";
17 context.arc(60,60,30,0,Math.PI*2,false);
18 context.fill;
19 context.closePath;
20
21 </script>效果如下：
部分图形效果并没有清晰达到属性描述的效果，可能是我设置的颜色问题。
*请认真填写需求信息，我们会在24小时内与您取得联系。
