关于html5的几个关键知识点学习心得（3）

今天我学习了如下几点：
HTML5的大纲
加强版的ol列表元素
重新定义后的dl元素
canvas元素创建画布
canvas绘制矩形
canvas绘制圆形
canvas绘制文字

1. 关于html5的大纲内容
   1、显式编排
   显式编排是指明确使用 section元素进行分块来创建网页文档，每个内容区块内使用标题（h1～h6）（其中可能会用到nav元素，这个元素我在前面的csdn中解释过，他并不会影响我们制作的网页，而只是起到一个语法的作用，通过nav标签能更好的实现在不同设备上（如：手机、电脑等）控制导航链接是否显示，从而让网页适应不同大小的屏幕。）。
   2、隐式编排
   所谓的隐式编排，就是我们不使用 section素进行明确的区块划分，而是根据我们写的（h1-h6、 hgroup等）元素进行自动创建区块，因为HTML5的分析器可以根据不同级别的标题判断出对应的内容区块.
   3、标题分级
   不同的标题有不同的级别，在（h1-h6）中h1的级别最高，而h6的级别最低所以在隐式编排的情况下就会按照以下规则生成，如果出现新的标题比上一个标题级别低，那么将生成下级内容区块2）、如果新出现的标题比上面出现的一个标题级别高，或者两者几倍相同，那么就生成新的内容区块， 如果在制作的过程中，h1的标题后面出现untitled section，原因应该是在body内容里面忘记加上标题栏，如图所示，应该加在图中的第八行（可以用hgroup对其中的内容区块进行合并）。

2.加强版的ol列表元素以及重新定义后的dl元素
在html4.0中，如果我们用ol列表元素，多创建几个li 那么系统会自动在你前面加上符号，如图所示：
前面的序号无法认为改变，那么在html5中，这一点可以用start属性（加在ol 属性里面）进行正向标号，并且可以用reversed进行反向标号，并且前面的数字通过type属性可以进行改变，例如把1改成A，那么就以此往下类推。
dl元素在html4中，专门用来定义术语的列表，那么在html5中，dl元素被赋予更多的功能，或者可以说是做的更加细化了。dl元素下面有多个dt组成，dt后面又紧跟多个dd元素，重新定义的dl元素可以包含多个带名字的列表项，就像一个树的分支一样展开。（dl元素通常都放在aside元素中）

3.用canvas元素创建画布
canvas元素是在html5中新增的一个重要元素，用来专门绘制图形。如何用canvas创建画布呢，<canvas id="canvas" width="多少" height=“多少“></canvas>
它表示的意思就是定义一个画布，给它附上宽度高度。然后再引入脚本，接着，再body属性里面加上οnlοad=“draw（‘canvas’）；“语句，目的是使用脚本中的draw函数进行绘制。（scripy（加type和src）函数放在head里面，目的是制作脚本，画布内部的属性再脚本里面实现）

4.用canvas绘制矩形，圆形以及文字。
1.绘制矩形：在绘制之前，我们需要用getelsementbyid来获取到canvas对象，canvas可以先用getcontext（）来获取图形上下文，并且需要再draw函数中把参数设置成2d。用canvas绘制有两种方法（一下内哦那个都是在脚本里面进行的，脚本在sricpt type 和src中实现）
1.用fill元素来实现，他的作用是填充图形内容
2.用stroke，他的作用是绘制边框
在他们属性的后面加上style就可以调整填入其中的颜色值，（fillstyle 和strokestyle），绘制颜色的时候会用到rgba（rgb（，，））或者再后面加上一个a表示透明度（0-1），其中的rgb分别是红，绿，蓝英文单词的首字母。
再这个矩形中绘制或者填充一个矩形的边框就需要用到context.fillrect(x,y,width,height),相应的，把fillrect换成strokerect，就是填充矩形边框的函数，x和y表示制作的矩形的横坐标和纵坐标，坐标原点再左上角。
2.绘制圆形：先用context.beginpath()来获取图形上下文对象，同时再绘制结束时，用context.closepath()来关闭路径。创建图形路经时，需要使用图形上下文对象的arc方法 context. arc （x. y，radius， starAngle， endAngle， anticlockwise）x是绘制图形的起点标，y是制图形起点的纵标， radius是圆形的半径，starangle是开始的角度，endangIe表示结束时图形的角度，anticIockwise表示是否按正方向顺序绘制。绘制圆形就需要用到context.fill（）；以及context fillstyle=‘rgba（，，）’（html5脚本中用var来定义一个值，for循环也是适用的）
这里为脚本的内容
做图形绘制的时候，一些顺序非常重要，要根据我上面的总结来写代码顺序。
3.绘制文字：绘制文字要用到context.filltext（text，x，y，【maxwidth】）和context.stroketext（text，x，y，【maxwidth】），里面的功能在上面矩形绘制和圆形绘制功能用法相似，这边就不多做介绍。比较重要的一个定义文字大小要用到context.font（）函数，括号里面的一些属性前面要加上font-，有size，weight 和family。（用canvas来绘制一些东西的时候，步骤通常是这样：先引用文件，然后归纳canvas属性为2d，接着定义绘制图像外框的颜色，大小，以及边框颜色及大小，接着定义文字自身的大小，颜色及属性，最后把文字再图像外框中的位置以及什么文字表示出来就可以了）

以上是我今天的学习总结及心得，小白上路，如有不足，请多包涵。