学习Html5

目录

一、HTML5新增特性

一、.canvas画布

二、新多媒体元素

三、新表单元素

四、新的语义和结构元素

---

一、HTML5新增特性

一、.canvas画布

二、新多媒体元素

1.audio

2.video

3.source

4.embed

5.track

三、新表单元素

1.datalist

2.keygen

3.output

四、新的语义和结构元素

二、canvas的常见属性

一、什么是 canvas?

canvas是一个容器，一个绘制图像的容器，通常由脚本来完成

二、创建一个画布（canvas）

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

canvas包括 Id , width,height 等三个基本属性

三、绘制图像

1.获取canvas的id  var  c = document.getElementById("myCanvas")

2.用getcontext 创建一个comtext对象  var cxt = c.getContext("2D")

3.用fillStyle设置填充内容·，可以是颜色，图像，或者渐变色

例：1.填充颜色：fillStyle("red")

        2.渐变色：a.创建渐变   gra = createLinearGradient("x,y,x1,y1")其中x,y和x1,y1为起始和结束坐标

                        b.设置起始和结束位置 gra.addColorStop(0,"red");  gra.addColorStop(1,"white"),其中的起始是0，末尾是1，中间是小数

                        c.将其填充到fillStyle，cxt.fillStyle = gra

4.用fillRect设置绘画内容的范围，fillRect(x,y,x1,y1),其中x,y为起始坐标，x1,y1为结束坐标

四、一些特性

1.坐标：

2.路径

直线路径： moveto(x,y)为起始坐标，lineto(x1,y1)为结束坐标

圆形路径：