「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。
每日刷题第31天 2021.1.27
HTML5 Canvas元素的作用？
- Canvas元素用于在网页上绘制图形
- 画布是一个矩形区域，您可以控制其每一像素
- canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
- 该元素的标签强大之处在于可以直接在HTML上进行图形操作
拓展
- canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<!-- 声明canvas元素标签 -->
<canvas id="myCanvas" width="400px" height="200px"></canvas>
// js内部进行调用，绘制图形
// 1.找到canvas元素
var c = document.getElementById("myCanvas")
// 2. getContext("2d") 对象是内建的 HTML5 对象
// 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx = c.getContext("2d")
// 3. 设置颜色为：红色
// fillStyle属性：可以是CSS颜色、渐变或图案
ctx.fillStyle="#FF0000"
// 4. 定位置
// fillRect(x,y,width,height)
ctx.fillRect(0,0,150,75)
如何在HTML5页面中嵌入音频、视频？
- HTML5包含嵌入音频文件的标准方式，支持的格式：MP3、Wav和Ogg
<!-- 音频 Mp3\Wav\Ogg-->
<audio src="" type="audio/mpeg"></audio>
- HTML5包含嵌入视频文件的标准方式，支持的格式：MP4、WebM和Ogg
<!-- 视频 Mp4\webM\Ogg-->
<video width="450" height="340" controls>
<source src="" type="video/mp4">
</video>
拓展
- 为什么audio的type属性：audio/mpeg
- MPEG-1音频分三层，分别为 MPEG-1 Layer1，MPEG-1 Layer2 以及 MPEG-1 Layer3，并且高层兼容低层。其中第三层协议被称为MPEG-1 Layer 3，简称MP3。
HTML5引入什么新的表单属性？
第一种
- type属性值 控件
- color 颜色选择控件
- date、time 日期、时间选择控件
- email 电子邮箱输入控件
- file 文件选择控件
- number 数字输入控件
- range 拖拽条
- search 搜索框
- url 网址输入控件
<!-- 举例：数字输入控件，只能填写数字 -->
<input type="number">
第二种
- datalist使用
- datalist包含
<option>元素，类似于<select>元素，然而<datalist>并不是独立控制，相反它是附加在<input type="text"/>上的list
<input type="text" name="" id="" list="dlist">
<Datalist id="dlist">
<option value="Blank"></option>
<option value="Blue"></option>
<option value="sea"></option>
<option value="aha"></option>
<option value="sky"></option>
</Datalist>
-
适用场景：假如我们需要用户输入的是他们的国家居住地，我们更喜欢使用
<select>元素，因为会限制可选的结果（有时候也许是好的）。但如果我们想要用户自由输入的同时又有一些建议选项，这里就是<datalist>的用处了 -
output使用
<form action="L3_01.html" method="get" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="number" id="num1"> +
<input type="number" id="num2"> =
<output name="num" for="num1 num2"></output>
</form>
- keygen的使用（待补）
拓展
- 每当用户修改
<input>元素的 value 时,input事件就会被触发。
