6.11学习笔记

一.
加强版ol元素
1.可以通过start属性来定义标号的开始值。
2.可以通过reversed属性来进行反向编号。

二.
dl元素
dl元素在HTML4中:
d元素在HTML4中，是一个专门用来定义术语的列表。
dl元素在HTML5中:
d元素在HTML5中，把d元素进行了重定义。每一项包含一条或者多秦带名字的dt元素，
用来表示术语，d元素后面紧跟-个或者多个dd元素，用来表示定义。重定义后的dI列表包
含多个带名字的列表项。

三.
canvas元素
是专门绘制图形的元素
画布的创建方法:指定id、width (画布宽度)、height (画布高度)。
例如: <canvas id='canvas" width='500" height=“350*>上面这个实例的意思
就是，创建- -个画布，长度为500，高度为350.
引入脚本的方法:
比如: <script type-'text/javascipt” src-“canvas.jspcharset=”'utf- 8">上面这个实例
的意思就是:引入一个名为canvas的JS脚本，JS脚本的语言编码是utf-8
在body的属性里面，使用οnlοad="draw('canvas);"语句。调用脚本文件中
的draw函数进行图形绘画。

四.
绘制矩形
1.用getElementByid方法获取到canvas对象
2.在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图力能的对象。
要使用canvas对象的getContext()方法获得图形上下文，在draw函数中把参散设置为"2d" .
3.canvas绘制有两种方法:
1)、填充(fill)
填充是将图形内部填满。
2)、绘制边程(stspke)
绘制边框是不把图彩内部填满，只是绘制图形的外框。
4.
当我们在给制图形的时候，首先要设定好绘制的样式，然后我们就可以调用有关的方法进行绘制。.
1)、filstyle属性
填充的样式，在这个属性里面设置填入的填充颜色值。
2)、strokeStyle属性
图形边框的样式，在这个属性里面设置填入边框的填充颜色。
5.
通过对上下文对象(context)的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的亮度的。
6.
绘制图形的时候要填充的颜色或者边框分别可以通过ilstyle属性和strokestyle属性来指定。
颜色的值可以使用
1）16进制的颜色值《#000000)
2)颜色名(black)
3)rgb (rgba(0,0,0) )
4)rgba (rgba(0,0,0,0.1)
7.
使用fIRect方法和strokeRect方法来填充矩形和绘制矩形的边框。
context.filRect (x,y,width,.height)
context.strokeRect (x,y,width,height)
这两种方法的参故都是一样的，X是指矩形的起点構坐标，y是指矩形的纵坐标，坐标的原点是canvas
画布的最左上角，width是指矩形的长度height是指矩形的高度。
例子

function draw(id) {
var canvas =
document. getElementById(ia) ;
var context = canvas. getContext( 2d’ );
context. fillStyle =”#000”;
context. strokeStyle =^ #f60" ;
context. lineWidth = 5;
context. fillRect (0, 0, 400, 300);
context. strokeRect (50, 50, 180，120) ;
context. strokeREct(110,110,180,120);
}
五.
1.
使用图形上下文对象的beginPath方法。
context.eginPath () ;
2.
创建圆形路径时，需要使用图形上下文对象的arc方法。
context. arc (,radius,starAngle, endAngle,anticlockwise )
x是绘制圆形的起点横坐标，y提绘制圆形起点的纵坐标，radius是圆形的半径，
starAngle是开始的角度， endAngle是结束的角度，anticlockwise是否按顺时针方向绘制。
绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使
以下这个方法，把角度换成弧度。
var radius = degrees Math.PI/180
这个里面的Math.PI表示的角度是180度。Math.PI 2的角度是360度。
3.
使用图形，上下文对象的closePath方法将路径关闭。
context.closepath();

context.fllstyle = ‘rgba(255,0,0,0.25)’;
context.fill( );

例子：

function draw(ia) {
var canvas = document. getElementById(id) ;
var context = canvas. getContext( 2d’ ) ;
context. fillStyle #f1f2f3" ;
context. fillRect (0, 0, 400, 400);
for(var i : 0;i<10;1++){
context. beginPath( ) ;
context. arc(i25, i25, 10, 0, Math. PI*2, true) ;
context. closePath( ) ;
context. fillStyle =” rgba (255,0, 0, 0.25)";
context. fill( ) ;
}
六.
绘制文字
绘制字体时可以使用flIText方法或者strokeText方法。
fillText方法用填充的方式来绘制字符串;
context.filText 《text, x,y,[maxwidth]) ;
strokeText方法用轮廓的方式来绘制字符串；

context.strokeText (tepxt,器! y,[maxwidth]) ;

第一个参数text表示要绘制的文字，第二个塑数x表示要绘制的文字的起点模坐标，第三个参数Y表示绘制的文字的起点纵坐标，第4个
参数maxwidth为可选参数，表示显示文字的时候最大的宽度，可以防止文字溢出。
1.
context.font = “font- weight font- size font- familyq”;
context.font有三个参数，第一个参数font-weight
normal默认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更绍的字符。
定义由粗到日的字符。400等同于normal,而700等同于bold。
第二个参数font- size规定文本的字体尺寸
2.
context. textBaselne = alphabebc;
属性值可以是top (顶部对齐)。 hanging (悬挂)， middle (中间对齐)、. bottom (底部对齐)、 alphabetic是默认值
3.
conText.textAlign = “start”
属性值可以设置为: start. end.left. right. center.

< !DOCTYPE html>

< meta charset= "UTF-8"> < title> canvas绘制文字 < body οnlοad=“draw（canvas）”> ; function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); contex.filltyle = 'green'; context.fillRect(0,0,800,300); context.fillStyle = ' #fff ; context.strokeStyle = ' #fff ; context.font = "bold 40px '字体’，'字体，'微软雅黑",'宋体"; context.textBaseline = 'hanging'; // context.textAlign = start' ; context.illText("欢迎收看麦子学院推出的' ,1p ,40); contetxt.illText('《HTML5+ CSS3轻松入门与实战》',40,110); context.fillText('视频教程',580,180); // context. strokeText(maizi学院,0,40);