HTML5(一)

来源：互联网发布：剑三正太脸型数据网盘编辑：程序博客网时间：2024/06/07 09:06

·HTML5出现了一些新的特性

1· 用于绘画的 canvas 元素

2· 用于媒介回放的 video 和 audio 元素

3· 对本地离线存储的更好的支持

4· 新的特殊内容元素，比如 article、footer、header、nav、section

5· 新的表单控件，比如 calendar、date、time、email、url、search等

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><canvas id="myCanvas" width="230" height="120" style="border:1px solid  darkred"></canvas><script type="text/javascript">    var  c=document.getElementById("myCanvas");    var  cxt= c.getContext("2d");    //绘制一个红色矩形//      cxt.fillStyle="#FF0000";//      cxt.fillRect(0,0,150,75);    //绘制一条线,//      cxt.moveTo(0,0);//      cxt.lineTo(100,80);//      cxt.lineTo(45,30);//      cxt.lineTo(10,29);//      cxt.stroke();    //绘制一个圆//      cxt.fillStyle="blue";//      cxt.beginPath();//      cxt.arc(25,25,25,0,1.5*Math.PI,false);//      cxt.closePath();//      cxt.fill();    //绘制渐变效果//    var grd=cxt.createLinearGradient(0,0,200,62);//    grd.addColorStop(0,"red");//    grd.addColorStop(1,"white");//    cxt.fillStyle=grd;//    cxt.fillRect(0,0,200,62);    //图像    var img=new Image();    img.src="timg1.png";        //在画布上定位图像  //  cxt.drawImage(img,10,0);       //在画布上定位图像，并规定图像的宽度和高度    //cxt.drawImage(img,10,10,160,80);    //剪切图像，并在画布上定位被剪切的部分：    cxt.drawImage(img,70,60,90,80,20,20,90,80);</script></body></html>

control 属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的

视频<video>标签: ogg,MP4,Webm

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

controls="controls" autoplay="autoplay" loop="loop" preload="auto" src="song.ogg"

音频<audio>标签:ogg,MP3,Wav

例如:<audio src=”song.ogg” type=”audio/ogg”></audio>

音频<audio>标签:ogg,MP3,Wav

例如:<audio src=”song.ogg” type=”audio/ogg”></audio>

拖放:

画布:Canvas

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context对象：

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect方法规定了形状、位置和尺寸。

画线条:moveTo()起点,lineTo()指向点,stroke()完成定义的图像

画圆:context.arc(x,y,r,sAngle,eAngle,counterclockwise);

X,X坐标,y,y坐标,r半径,sAngle起始角度,eAngle结束角度

Counterclockwise为方向,true为逆时针,false为顺时针

fill() 方法填充当前的图像（路径）。默认颜色是黑色。

用 fillStyle 属性来填充另一种颜色/渐变。

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

content.beginPath();//开始绘画

content.closePath();//结束绘画

渐变:context.createLinearGradient(x0,y0,x1,y1);

x0,y0,x1,y1分别是渐变点开始的X坐标,y坐标,结束的X坐标,y坐标

addColorStop() 方法规定 gradient 对象中的颜色和位置。

addColorStop() 方法与 createLinearGradient() 或createRadialGradient()一起使用。

可以多次调用 addColorStop()方法来改变渐变。如果不对gradient对象使用该方法，那么渐变将不可见。为了获得可见的渐变，至少需要创建一个色标。

gradient.addColorStop(stop,color);

stop,0-1之间

图像:将图片放在画布上canvas drawImage()方法

在画布上定位图像：

context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

//在画布上添加视频

element.addEventListener(event, function, useCapture)

事件,函数方法,布尔值,冒泡方式

true -事件句柄在捕获阶段执行

false- false-默认。事件句柄在冒泡阶段执行

addEventListener()指向指定元素添加句柄,

removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄

var v=document.getElementById("video1");

v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);

v.addEventListener('pause',function() {window.clearInterval(i);},false);

v.addEventListener('ended',function() {clearInterval(i);},false);

参考资料:http://www.w3school.com.cn/index.html

阅读全文

0 0