这篇教程详细介绍了HTML5的多个核心特性，包括使用canvas进行图形绘制，MathML用于展示数学公式，实现拖放功能，地理定位技术，以及HTML5的视频和音频播放功能，还有新增的input输入类型，如color、date等，为网页交互带来丰富体验。
HTML5
一、 canvas
-
定义 ：是图形容器，通过脚本绘制图形.。他是一个二维网络，从左上角开始，上方为x，左方为y，起始坐标（0,0），结束坐标（height，width）。
-
创建画布：
<canvas id="myCanvas" width="200" height="100"></canvas> -
用js绘制图像
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3">123</canvas>
<script>
//找到canvas元素
var c=document.getElementById("mycanvas");
//创建context对象
var ctx=c.getContext("2d");
//绘制红色矩形
ctx.fillStyle="#FF0000";
//x轴、y轴，宽，长
ctx.fillRect(0,0,150,75);
</script>
4.用stroke绘制线条
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3">123</canvas>
<script>
//找到canvas元素
var c=document.getElementById("mycanvas");
//创建context对象
var ctx=c.getContext("2d");
//线条的起点
ctx.moveTo(0,0);
//线条的终点
ctx.lineTo(200,100);
ctx.stroke();
</script>
5.arc()f方法画圆
<script>
//找到canvas元素
var c=document.getElementById("mycanvas");
//创建context对象
var ctx=c.getContext("2d");
ctx.beginPath();
//x轴、y轴、半径、起始角、弧度；Math.PI=360度
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
6.文本
- 实心文本：font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3">123</canvas>
<script>
//找到canvas元素
var c=document.getElementById("mycanvas");
//创建context对象
var ctx=c.getContext("2d");
//西文字体
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
</script>
- 空心字体：strokeText(text,x,y) - 在 canvas 上绘制空心的文本
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3">123</canvas>
<script>
//找到canvas元素
var c=document.getElementById("mycanvas");
//创建context对象
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
7.渐变
- 线条渐变
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3">123</canvas>
<script>
//找到canvas元素
var c=document.getElementById("mycanvas");
//创建context对象
var ctx=c.getContext("2d");
//创建渐变createLinearGradient(x,y,x1,y1)
var grd=ctx.createLinearGradient(0,0,200,0);
//addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
//创建矩形
ctx.fillRect(10,10,150,80);
</script>
- 圆渐变
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3">123</canvas>
<script>
//找到canvas元素
var c=document.getElementById("mycanvas");
//创建context对象
var ctx=c.getContext("2d");
//创建渐变createLinearGradient(x,y,r,x1,y1,r1)
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
//addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
//创建矩形
ctx.fillRect(10,10,150,80);
</script>
8.图像放在画布上
<p>Image to use:</p>
<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>
二、MathML
1.定义：MathML 是数学标记语言，用来在互联网上书写数学符号和公式的置标语言。
2.实例
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo></mo>
<mi>x</mi>
</mrow>
<mo>+</mo>
<mn>4</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
三、拖放
1.定义
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
四、地理定位
1.定义：HTML5 Geolocation（地理定位）用于定位用户的位置。
五、HTML5视频
1.定义： 元素提供了 播放、暂停和音量控件来控制视频。同时 元素也提供了 width 和 height 属性控制视频的尺寸。 元素支持多个 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。 元素支持三种视频格式： MP4, WebM, 和 Ogg。
2.显示视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
3.使用dom进行控制
<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>
六、HTML5音频
1.定义：在 与 之间你需要插入浏览器不支持的元素的提示文本 。
元素允许使用多个 元素. 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件. 元素支持三种音频格式文件: MP3, Wav, 和 Ogg.
2.显示音频
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
七、HTML新的input类型
注意：input外层加form
-
color
选择你喜欢的颜色:<input type="color" name="favcolor">
-
date
生日:<input type="date" name="bday">
-
datetime
生日 (日期和时间):<input type="datetime" name="bdaytime">
-
datetime-local
生日 (日期和时间):<input type="datetime-local" name="bdaytime">
-
email
E-mail:<input type="email" name="email">
-
month
生日 (月和年):<input type="month" name="bdaymonth">
-
number
数量 ( 1 到 5 之间 ):<input type="number" name="quantity" min="1" max="5">
-
range
<form action="demo-form.php" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>
10. search
Search Google: <input type="search" name="googlesearch">
11. tel
电话号码:<input type="tel" name="usrtel">
12. time
选择时间: <input type="time" name="usr_time">
- url
添加您的主页:<input type="url" name="homepage">
- week
选择周:<input type="week" name="week_year">
扫一扫
1279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
