html5程序设计摘要

• 安全机制设计

　　　　html5引入了一种新的基于来源的安全模型，该模型不仅易用，而且对各种不同的API都通用。

• 表现和内容分离
• 化繁为简

1. 以浏览器原生能力替代复杂的JavaScript代码
2. 新的简化的DOCTYPE
3. 新的简化的字符集声明
4. 简单而强大的HTML5 API

• 通用访问

1. 可访问性
2. 媒体中立
3. 支持所有语种

• html5引入了很多新的标记元素，根据内容类型的不同，这些元素被分成了7大类：

　　　　内嵌、流、标题、交互、元数据、短语、片段

• html5不仅仅是提供新元素支持新功能，更重要的是添加了对脚本和布局之间的原生交互能力，基于此，我们可以实现以前不能实现的效果。
• www.caniuse.com         提供了详尽的HTML5功能支持情况              

 

 

                       

• www.html5test.com　　若用户通过浏览器访问的话，该网站会直接显示用户浏览器对HTML5规范的支持情况。

                     　　　　　

• 还可以使用Modernizr--一个JavaScript库 　　
• 过去的JavaScript纯粹是被解释执行，而最新的引擎则直接将脚本编译成原生机器代码。
• html5时代的四个新设计准则：兼容性、实用性、互通性和通用访问性。
• html5效率优先的设计理念，它推崇表现和内容分离，所以在HTML5的实际编程中，开发人员必须使用css来定义样式。

html5shiv

• html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
  

　　　　html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：

1 2 3 4 5

<!--[ifltIE9]> <script type="text/javascript" src="scripts/html5shiv.js"></script> <![endif]-->

 

 

window.JSON

• JSON--数据交换格式
• json由于其语法简单和在JavaScript编程中与生俱来的兼容性，JSON变成了HTML5应用内部数据交换的事实标准。
• 典型的JSON API包含两个函数：parse()--用于将字符串序列化成DOM对象    和stringify()--将DOM对象转化成字符串

 

 canvas

 　　结构应该这么写：浏览器在获取canvas对象时需要先加载对象

1. <canvas id="myCanvas" width="200" height="200">此浏览器不支持canvas元素</canvas>
2. <script type="text/javascript">

　　　　var c = document.getElementById("myCanvas");
　　　　var cxt=c.getContext("2d");
　　　　cxt.fillStyle="#353535";
　　　　cxt.fillRect(0,0,150,75);
　　</script>

• beginPath、moveTo以及lineTo这些函数都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制(stroke)或填充(fill)方法时，结果才会显示出来。否则，只有在显示图像、显示文本或者绘制、填充和清除矩形框的时候，canvas才会马上更新。
• 
• 变换

         canvas上绘制图像的另一种方式--使用变换。把它当成是介于开发人员发出的指令和canvas显示结果之间的一个修正层。不管在开发中是否使用变换，修正层始终都是存在的。

　　　不在代码中调用变换函数并不意味着可以提升canvas的性能。canvas在执行的时候，变换会被呈现引擎隐式调用，这与开发人员是否直接调用无关。

　　　关于可重用代码有一条重要的建议：一般绘制都应从原点（坐标系中的0,0点）开始，应用变换（缩放、平移、旋转等），然后不断修改代码直至达到希望的效果。

 　　

　　　　<script type="text/javascript">
　　　　　　function draw(){
　　　　　　//取得canvas元素并取得其上下文
　　　　　　var c = document.getElementById("canvas");
　　　　　　var cxt = c.getContext("2d");

　　　　　　//保存当前绘图状态
　　　　　　cxt.save();
　　　　　　//向右下方移动绘图上下文
　　　　　　cxt.translate(70,140);

　　　　　　//用绝对坐标来创建一条路径
　　　　　　cxt.beginPath();
　　　　　　cxt.moveTo(0,0);
　　　　　　cxt.lineTo(70,-70);

　　　　　　//将这条线绘制到canvas上
　　　　　　cxt.stroke();

　　　　　　//恢复原有的绘图状态
　　　　　　cxt.restore();
　　　　}
　　　　window.addEventListener("load",draw,true);
　　　</script>

•  路径

1. 按照惯例，不论开始绘制何种图形，第一个需要调用的就是beginPath。不带任何参数。最大的用处是canvas需要据此来计算图形的内部和外部范围，以便完成后续的描边和填充。
2. 调用beginPath之后，就可以使用context的各种方法来绘制想要的形状了。
   1. moveTo(x,y):不绘制，只是将当前位置移动到新的目标坐标(x,y)--拿起笔
   2. lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。--画
   3. 不过，不管调用它们哪一个，都不会真正画出图形，因为我们还没有调用stroke或者fill函数。目前，我们只是在定义路径的位置，以便后面绘制时使用。
3. closePath,这个函数的行为同lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。
4. 此时，我们可以在已有的路径中继续创建其他的子路径，或者随时调用beginPath重新绘制新路径并完全清除之前的所有路径。
5. 使用描边样式

　　　　//加宽线条

　　　　context.lineWidth = 4;

　　　　//平滑路径的结合点（让拐角处变得更圆滑，也可以设置成bevel、miter，相应的context.miterLimit值也需要调整来变换拐角样式）

　　　　context.lineJoin = 'round';

　　　　//将颜色改成棕色

　　　　context.strokeStyle = "#663300";

　　　　//最后，绘制树冠

　　　　context.stroke();

　　　　还有一个lineCap属性，它的值可以设置为butt、square或者round,以此来指定线条末端的样式。

　　6.填充样式

　　　　context.fillStyle='#339900';

　　　　context.fill();

　　　　先描边后填充，因此填充会覆盖一部分描边路径。如果希望看到完整的描边路径，可以在绘制路径（调用context.stroke()）之前填充（调用context.fill()）。

　　7.context.fillRect(起始位置x,起始位置y,width,height)画矩形

　　　还有strokeRect:基于给出的位置和坐标画出矩形的轮廓

　　　clearRect的作用是清除矩形区域内的所有内容并将它恢复到初始状态，及透明色。

　　8.绘制曲线

　　

 

注：如若喜欢，欢迎转载，请在文章页面明显位置给出此文链接！
若您觉得这篇文章还不错请点击下右下角的推荐，有了您的支持才能激发作者更大的写作热情，非常感谢！