html5元素标签

 

 

视频：

<video src="movie.ogg" controls="controls">
</video>　

 

 

音频：

<audio src="song.ogg" controls="controls">
</audio>　　

canvas 画布 ：
canvas用于在网页上绘制图形。
1. 创建画布：

<style>
<canvas id="mycanvas" width="500" height="500"></canvas>
</style>　

canvas本身是没有绘画能力的。所有绘制工作必须在javascript内部操作。

 <script>
 用id来寻找canvas元素。
 var a=document.getElementById("mycanvas");
 创建context对象。
 var cxt=a.getContext("2d");
 fillStyle方法将其变为红色。
 cxt.fillStyle="#FF0000";
 fillRect 方法规定了形状、位置和尺寸
 cxt.fillRect(0,0,150,75); 
</script>　

 矩形：

 shadowColor 设置或返回用于阴影的颜色 
例：

ctx .shadowColor="black";

createLinearGradient() 创建线性渐变　

定义从黑到白的渐变
例：

ctx.createLinearGradient(0,0,170,0);

 rect() 创建矩形 ：
例：

ctx.rect(20,20,150,100);

fillRect() 绘制被填充的矩形 ：
例：

ctx.fillRect(20,20,150,100);

 strokeRect() 绘制矩形：
例：

ctx.strokeRect(20,20,150,100);

路径：

1. fill() 填充当前绘图
1. strocke() 绘制已定义的路径
1. beginPath() 起始一条路径，或重置当前路径
1. moveTo() 把路径移动到画布中的指定点，不创建线条
1. closePath() 创建从当前点回到起始点的路径
1. lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
1. quadraticCurveTo() 创建二次贝塞尔曲线
context.quadraticCurveTo(cpx,cpy,x,y);
参数：cpx：贝塞尔控制点的 x 坐标
：cpy：贝塞尔控制点的 y 坐标
：x：结束点的 x 坐标
：y：结束点的 y 坐标
例：

ctx.quadraticCurveTo(20,100,200,20);
开始点：moveTo(20,20) 
控制点：quadraticCurveTo(20,100,) 
结束点：quadraticCurveTo(200,20)

1. bezierCurveTo() 创建三次方贝塞尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
参数：cp1x：第一个贝塞尔控制点的 x 坐标
：cp1y： 第一个贝塞尔控制点的 y 坐标
：cp2x ：第二个贝塞尔控制点的 x 坐标
：cp2y： 第二个贝塞尔控制点的 y 坐标
：x： 结束点的 x 坐标
：y ：结束点的 y 坐标
例：

ctx.bezierCurveTo(20,100,200,100,200,20);
开始点：moveTo(20,20) 
控制点 1：bezierCurveTo(20,100,) 
控制点 2：bezierCurveTo(200,100,) 
结束点：bezierCurveTo(200,20)

1. arc() 创建弧/曲线

例：ctx.arc(100,75,50,0,2*Math.PI);
中心：arc(100,75,) 
起始角：arc(0,) 
结束角：arc(1.5*Math.PI) 

context.arc(x,y,r,sAngle,eAngle,);
参数：x： 圆的中心的 x 坐标。
：y： 圆的中心的 y 坐标。
：r： 圆的半径。
sAngle： 起始角，以弧度计。
eAngle： 结束角，以弧度计。
 转换 ：
1. scale() 缩放当前绘图至更大或更小
2.context.scale(scalewidth,scaleheight);
参数：scalewidth 缩放当前绘图的宽度
：scaleheight 缩放当前绘图的高度

例：ctx.scale(2,2);

1. rotate() 旋转当前绘图
2.context.rotate(angle);
参数：angle：旋转角度，以弧度计。

例：如需旋转 5 度，：5*Math.PI/180。
ctx.rotate(5*Math.PI/180); 

文本：
 属性： 
1. font 设置或返回文本内容的当前字体属性
值：font-style 规定字体样式。
：font-variant 规定字体变体。
：font-weight 规定字体的粗细

例：ctx.font="40px Arial";

1. textAlign 设置或返回文本内容的当前对齐方式
值：start 默认。文本在指定的位置开始。
：end 文本在指定的位置结束。
：center 文本的中心被放置在指定的位置。
：left 文本左对齐。
：right 文本右对齐。

方法：
1. fillText() 在画布上绘制“被填充的”文本
context.fillText(text,x,y);
参数：text 规定在画布上输出的文本。
：x开始绘制文本的 x 坐标位置（相对于画布）。
：y开始绘制文本的 y 坐标位置（相对于画布）。

例：ctx.fillText("Hello World!",10,50);　　

1. strokeText() 在画布上绘制文本（无填充）
context.strokeText(text,x,y);
参数：text 规定在画布上输出的文本。
：x 开始绘制文本的 x 坐标位置（相对于画布）。
：y 开始绘制文本的 y 坐标位置（相对于画布）。

例：ctx.strokeText("Hello World!",10,50);　

1. measureText() 返回包含指定文本宽度的对象
context.measureText(text).width;
参数 ：
text 要测量的文本。

例：ctx.fillText("width:" + ctx.measureText(txt).width,10,50)