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可以理解为一个坐标系，绘制图形或附加照片都需要根据坐标来定位绘制。
-
示例中使用到了一些常用的功能，更多API：HTML 画布 | 菜鸟教程 (runoob.com)
<!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>
参考文档
扫一扫
1194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
