【整理】html5知识点2

原创

RandTsui 2023-04-03 15:24:59 博主文章分类：web前端 ©著作权

文章标签 html5 ide SVG HTML5 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者RandTsui的原创作品，请联系作者获取转载授权，否则将追究法律责任

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>

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

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

 var img=document.getElementById("scream");



 img.onload = function() {

ctx.drawImage(img,10,10);

 }

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 οnclick="playPause()">播放/暂停</button> 

   <button οnclick="makeBig()">放大</button>

   <button οnclick="makeSmall()">缩小</button>

   <button οnclick="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>标签中使用