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)
posted @ 2015-07-12 20:43  +爱在一起+  阅读(175)  评论(0编辑  收藏  举报