HTML5 笔记(一)
1.HTML5部分新特性
- HTML5的新特性，HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签，新的表单和新的表单属性等。这些新特性都有兼容性问题，基本上都是
ie9+以上版本的浏览器才会支持。 - 语义化标签 HTML5中新增语义化标签。头部标签
<header></header>，导航标签<nav></nav>，内容标签<article></article>，定义文档某个区域<section></section>，侧边栏标签<aside></aside>，尾部标签<footer></footer>。此种语义化标准主要是针对搜索引擎的，这些新标签页面中可以使用多次，在ie9中需要将这些元素转换为块级元素。 - 视频标签新增的多媒体标签主要包含两个：音频：
<audio>；视频：<video>。在不使用插件的情况下，可以原生的支持视频格式文件的播放，支持三种格式的视频，但尽量使用MP4格式的，语法<video src="文件地址" controls="controls"></video>其中有几项属性，自动播放autoplay，在谷歌浏览器需要使用静音播放；向用户显示播放控件controls；设置播放器宽度width；设置播放器高度height；播放完是否继续播放该视频，循环播放loop；规定是否预加载视频，如果有了自动播放就会忽略该属性preload；视频url地址src；等待加载的画面图片poster；静音播放muted。 - 音频标签 支持三种音频格式，建议使用
MP3的。语法<audio src="文件地址" controls="controls"></audio>其中同样具备几种属性：自动播放autoplay具备此属性时，音频在准备就绪后会立即播放；向用户显示控件controls；循环播放loop。 - 新增的input属性新增的input类型，type值：Email类型
email，URL类型url，日期类型date，时间类型time，月类型month，周类型week，数字类型number，手机号码tel，搜索框search，颜色选择表单color。 - 新增的表单属性 新增的对于表单元素的属性：必填项
required；提示文本placeholder存在默认值时将不显示；自动聚焦属性autofocus；多选文件提交multiple；用户在字段开始键入时，基于之前键入的值，显示出字段中填写的选项，也就是历史记录autocomplete。可以使用input::placeholder选择器修改提示框中的字体颜色。
2.Canvas
- canvas被称为画布，可以用于在html页面中进行图形的绘制，canvas标签仅仅作为图形的容器，无法呈现图形，可以使用脚本来完成图形绘制。canvas可以理解为一个坐标系，绘制图形或附加照片都需要根据坐标来定位绘制。
- 示例中使用到了一些常用的功能
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border: 1px solid blue;background-color: aqua;">
</canvas>
<br>
<button onclick="drawRect()">点我绘制方形</button>
<button onclick="drawCir()">点我绘制圆形</button>
<button onclick="drawLine()">点我绘制线(五角星)</button>
<button onclick="drawFont()">点我绘制文字</button>
<button onclick="drawGradient()">点我绘制渐变色</button>
<button onclick="drawPic()">点我添加图片</button>
<script>
// 获取canvas元素
var c = document.getElementById('canvas');
// 获取canvas上下文
var context = c.getContext("2d");
// 清空画布
function clear(params) {
c.height = c.height;
}
// 绘制方形
function drawRect() {
clear();
// 设置绘制图形颜色
context.fillStyle = "green";
// 绘制方形，在方形中的四个参数分别为x轴坐标，y轴坐标，宽度，高度
context.fillRect(200, 100, 300, 400);
// 设置绘制线颜色
context.strokeStyle = "red";
// 设置线宽
context.lineWidth = 20;
// 绘制方形边框
context.strokeRect(200, 100, 300, 400);
// 清除中心部分内容，将颜色置成透明
context.clearRect(290, 220, 120, 160);
}
// 绘制圆形，分为两步，先绘制路径，再进行填充
function drawCir() {
clear();
// 开启路径
context.beginPath();
// 创建圆形路径，参数分别为圆心x轴，圆形y轴，圆心半径，起始角度，结束角度，是否是逆时针绘制
context.arc(400, 300, 200, 0, Math.PI * 2, true);
// 闭合路径，连接线的起点与终点
context.closePath();
// 设置绘制颜色
context.fillStyle = 'green';
// 绘制
context.fill();
context.beginPath();
context.arc(400, 300, 100, 0, Math.PI * 2, true);
context.closePath();
// 设置绘制线颜色
context.strokeStyle = "red";
// 设置线宽
context.lineWidth = 20;
// 绘制边框
context.stroke();
}
// 绘制线(五角星)
function drawLine() {
clear();
// 定位，参数为：x轴坐标，y轴坐标
context.moveTo(400 - Math.sin(0) * 200, 300 - Math.cos(0) * 200);
// 移动，参数为：x轴坐标，y轴坐标
context.lineTo(400 - Math.sin(Math.PI * 0.8) * 200, 300 - Math.cos(Math.PI * 0.8) * 200);
context.lineTo(400 - Math.sin(Math.PI * 1.6) * 200, 300 - Math.cos(Math.PI * 1.6) * 200);
context.lineTo(400 - Math.sin(Math.PI * 0.4) * 200, 300 - Math.cos(Math.PI * 0.4) * 200);
context.lineTo(400 - Math.sin(Math.PI * 1.2) * 200, 300 - Math.cos(Math.PI * 1.2) * 200);
context.lineTo(400 - Math.sin(Math.PI * 2) * 200, 300 - Math.cos(Math.PI * 2) * 200);
context.lineTo(400 - Math.sin(Math.PI * 0.8) * 200, 300 - Math.cos(Math.PI * 0.8) * 200);
// 绘制颜色设置
context.fillStyle = 'yellow';
// 绘制，图形框住的区域
context.fill();
// 设置绘制线颜色
context.strokeStyle = "red";
// 设置线宽
context.lineWidth = 20;
// 绘制线
context.stroke();
}
// 绘制文字
function drawFont() {
clear();
// 设置字体与字号
context.font = "bold 30px Times New Roman";
// 设置对齐方式
context.textAlign = "left";
// 绘制文字
context.fillText("Hello World.Fill", 450, 90);
context.font = "italic 50px Arial";
context.textAlign = "right";
// 绘制空心文字
context.strokeText("Hello World.Stroke", 450, 200);
}
function drawGradient() {
clear();
// 线性渐变定义，分别为起始位置x坐标，y坐标，终点位置x坐标，y坐标
var grdRect = context.createLinearGradient(100, 100, 100, 500);
// 配置各点位移量渐变颜色
grdRect.addColorStop(0, "red");
grdRect.addColorStop(0.17, "orange");
grdRect.addColorStop(0.33, "yellow");
grdRect.addColorStop(0.50, "green");
grdRect.addColorStop(0.67, "cadetblue");
grdRect.addColorStop(0.83, "blue");
grdRect.addColorStop(1, "purple");
// 配置绘制颜色设置为渐变
context.fillStyle = grdRect;
// 绘制
context.fillRect(100, 100, 100, 400);
// 圆渐变定义，分别为起始圆的圆心x坐标，y坐标，半径，终点圆的圆x坐标，y坐标，半径
var grdRad = context.createRadialGradient(500, 250, 10, 550, 300, 150);
// 配置各点位移量渐变颜色
grdRad.addColorStop(0, "red");
grdRad.addColorStop(0.17, "orange");
grdRad.addColorStop(0.33, "yellow");
grdRad.addColorStop(0.50, "green");
grdRad.addColorStop(0.67, "cadetblue");
grdRad.addColorStop(0.83, "blue");
grdRad.addColorStop(1, "purple");
// 绘制圆形路径
context.beginPath();
context.arc(550, 300, 150, 0, Math.PI * 2, true);
context.arc(500, 250, 10, 0, Math.PI * 2, true);
context.closePath();
// 配置绘制颜色设置为渐变
context.fillStyle = grdRad;
// 绘制
context.fill();
}
// 添加图片
function drawPic() {
clear();
// 定义img对象
var img = new Image();
img.src = "https://www.runoob.com/wp-content/uploads/2013/11/img_the_scream.jpg";
// 绘制图片，参数依次为img对象，照片截取x坐标，截取y坐标，照片截取宽度，高度，照片放置位置，照片放置宽度，高度
context.drawImage(img,30,30,200,200,100,100,400,400);
}
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
