【整理】html5知识点2

原创 2016年05月31日 12:56:04
1、=========================================================HTML5 Canvas

创建一个画布(Canvas)
<canvas id="myCanvas" width="200" height="100"></canvas>


使用 JavaScript 来绘制图像
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>


Canvas - 路径
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();


在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();


Canvas - 文本
使用 canvas 绘制文本,重要的属性和方法如下:
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():


实心文字
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);


空心文字
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);


Canvas - 渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。
使用 createLinearGradient():


线性渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");


// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");


// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);


径向渐变\圆形渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");


// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");


// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);


Canvas - 图像
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>


<script>


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");


img.onload = function() {
ctx.drawImage(img,10,10);

</script>


2、=========================================================HTML5 内联 SVG
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准


SVG优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大


把 SVG 直接嵌入 HTML 页面
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>


SVG 与 Canvas两者间的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。


3、=========================================================HTML5 MathML
4、=========================================================HTML5 拖放(Drag 和 Drop)
5、=========================================================HTML5 Geolocation(地理定位)
6、=========================================================HTML5 Video(视频)
带控制器的视频
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>


</body>
</html>


js控制播放的视频
<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 
function playPause()

if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 

function makeBig()

myVideo.width=560; 

function makeSmall()

myVideo.width=320; 

function makeNormal()

myVideo.width=420; 

</script> 
</body> 
</html>


HTML5 Video 标签
标签 描述
<video> 定义一个视频
<source> 定义多种媒体资源,比如 <video> 和<audio>
<track> 定义在媒体播放器文本轨迹


带有两个字幕轨道的视频:
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>


7、=========================================================HTML5 Audio(音频)
<!DOCTYPE html>
<html>
<body>
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</body>
</html>


音频格式及浏览器支持
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
浏览器 MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ YES YES YES
Safari 5+ YES YES NO
Opera 10+ YES YES YES


音频格式的MIME类型
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav


HTML5 Audio 标签
标签 描述
<audio> 定义了声音内容
<source> 规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML学习

HTML简介什么是 HTML?HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语...
  • wtj900
  • wtj900
  • 2016年10月08日 17:31
  • 294

Html5知识点2

HTML里,比较基础的Tag主要用于标题,段落和分行。  学习HTML最好的方法,就是跟着示例学。为了各位学习的方便,我们准备了一个简单的HTML编辑器,你可以在左边写HTML代码,然后点击上面的按...

html5知识点整理总结

1.html5新元素: 新的输入类型:email;url;number;range;Date pickers (date, month, week, time, datetime, datetime...
  • ymjring
  • ymjring
  • 2012年02月22日 10:55
  • 936

【整理】html5知识点1

1、关于html5 HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 HTM...
  • for_cxc
  • for_cxc
  • 2016年05月31日 12:54
  • 233

html5桌面通知知识点分享

  • 2017年10月13日 10:33
  • 18KB
  • 下载

HTML5地理定位,百度地图API,知识点熟悉

判断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理...

【基础html5 基础知识点】(全)

新增的结构标签 section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中……;HTML4中 ……...
  • kongjiea
  • kongjiea
  • 2014年08月16日 15:33
  • 12148

html5移动端知识点总结(一)

第1章 使用rem作为单位 html{font-size:10px}11 1.1使用媒体查询,不同分辨率设置不同的html的font-size @(min-width:320px){ h...

Polyfills作为表单验证,html5里面关于表单的知识点!

如前所述在之前的章节,并不是所有的浏览器和平台支持新的令人兴奋的特性的HTML5的表单验证。因此可以派上用场polyfills他们改进用户体验的网站。 h5validate由Eric引领 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【整理】html5知识点2
举报原因:
原因补充:

(最多只允许输入30个字)