结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
var ctx = myCanvas.getContext(‘2d’);
//设置颜色
ctx.fillStyle = ‘red’;
//设置矩形的位置和尺寸（位置从 左上角原点坐标开始，尺寸为100*100的矩形）
ctx.fillRect(0, 0, 100, 100);
注意：
进行绘制时，需要指定确定的坐标位置，坐标原点(0,0)位于 canvas 的左上角，x 轴水平方向向右延伸，y 轴垂直向下延伸，如图：
直线绘制
-
strokeStyle：设置或返回笔的颜色、渐变或模式。默认值为：#000000。
-
lineWidth：设置或返回当前的线条宽度 ，以像素计。
-
beginPath()：起始一条路径，或重置当前路径。
-
closePath()：创建从当前点回到起始点的路径。
-
moveTo()：把路径移动到画布中的指定点，不创建线条。
-
lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条。
-
stroke()：绘制已定义的路径。
绘制一条直线例子：
对不起，你的浏览器不支持canvas
运行效果为：
绘制三角形例子：
对不起，你的浏览器不支持canvas
运行效果为：
矩形绘制
rect() 方法介绍
使用 rect() 方法创建矩形。语法为：
ctx.rect(x,y,width,height);
参数说明：
-
x 表示矩形左上角的 x 坐标。
-
y 表示矩形左上角的 y 坐标。
-
width 表示矩形的宽度，以像素计。
-
height 表示矩形的高度，以像素计。
注：使用
stroke()或fill()方法在画布上实际地绘制矩形。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
strokeRect() 方法介绍
使用 strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。语法为：
ctx.strokeRect(x, y, width, height);
注：参数与
rect()方法一致，唯一的区别是这里不需要再加一句stroke()或fill()方法。无法填色。
前面绘制矩形的例子也可以这样写：
对不起，你的浏览器不支持canvas
fillRect() 方法介绍
使用 fillRect() 方法创建实心矩形。语法为：
ctx.fillRect(x, y, width, height);
注：参数说明与前面一致，默认的填充颜色为黑色，可以使用
fillStyle属性来设置用于填充绘图的颜色、渐变或模式。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
clearRect() 方法介绍
使用 clearRect() 方法清空给定矩形内的指定像素。语法为：
ctx.clearRect(x, y, width, height);
注：参数说明与前面一致。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
圆和扇的绘制
使用 arc() 方法绘制圆或者椭圆。语法为：
ctx.arc(x, y, r, sAngle, eAngle, counterclockwise);
参数说明：
-
x 表示圆的中心的 x 坐标。
-
y 表示圆的中心的 y 坐标。
-
r 表示圆的半径。
-
sAngle 表示起始角，以弧度计（特别需要注意的是弧的圆形的三点钟位置是 0 度而不是常规以为的 90 度）。
-
eAngle 表示结束角，以弧度计。
-
counterclockwise 表示绘制圆的方向，值为 false 表示顺时针，为 true 表示逆时针。是一个可选值，默认值是 false。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
当然绘制扇形也很简单，只需要给定角度值小于 2 * Math.PI 再闭合一下就可以了，来看看例子。
对不起，你的浏览器不支持canvas
运行效果为：
填充和渐变
填充
使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：
ctx.fillStyle = color | gradient | pattern;
参数说明：
-
color 表示绘图填充的颜色。默认值是
#000000。 -
gradient 表示用于填充绘图的渐变对象（线性或放射性）。
-
pattern 表示用于填充绘图的 pattern 对象。
例子：
绘制实心矩形，填充颜色为红色。
对不起，你的浏览器不支持canvas
运行效果为：
渐变
使用 createLinearGradient() 方法创建线性渐变。语法为：
ctx.createLinearGradient(x0, y0, x1, y1);
参数说明：
-
x0 表示渐变开始点的 x 坐标。
-
y0 表示渐变开始点的 y 坐标。
-
x1 表示渐变结束点的 x 坐标。
-
y1 表示渐变结束点的 y 坐标。
使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为：
gradient.addColorStop(stop, color);
参数说明：
-
stop 表示渐变中开始与结束之间的位置。是介于
0.0与1.0之间的值。 -
color 表示在结束位置显示的 CSS 颜色值。
注：
addColorStop()方法与createLinearGradient()或createRadialGradient()一起使用。我们可以多次调用addColorStop()方法来改变渐变。如果我们不对gradient对象使用该方法，那么渐变将不可见。为了获得可见的渐变，至少需要创建一个色标。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为：
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
参数说明：
-
x0 表示渐变的开始圆的 x 坐标。
-
y0 表示渐变的开始圆的 y 坐标。
-
r0 表示开始圆的半径。
-
x1 表示渐变的结束圆的 x 坐标。
-
y1 表示渐变的结束圆的 y 坐标。
-
r1 表示结束圆的半径。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
fill() 方法
使用 fill() 方法填充当前的图像（路径）。默认颜色是黑色。填充另一种颜色/渐变使用 fillStyle 属性。
语法为：
ctx.fill();
注：如果路径未关闭，那么
fill()方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
文字绘制
fillText() 方法
使用 fillText() 方法在在画布上绘制实心文本。语法为：
ctx.fillText(text, x, y, maxWidth);
参数说明：
-
text 规定在画布上输出的文本。
-
x 表示开始绘制文本的 x 坐标位置（相对于画布）。
-
y 表示开始绘制文本的 y 坐标位置（相对于画布）。
-
maxWidth 表示允许的最大文本宽度，以像素计。可选。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
strokeText() 方法
使用 strokeText() 方法在画布上绘制空心文本。语法为：
ctx.strokeText(text, x, y, maxWidth);
注：参数说明与
fillText()方法一致。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
font 属性
使用 font 属性设置或返回画布上文本内容的当前字体属性。font 属性使用的语法与 CSS font 属性相同。
textAlign 属性
使用 textAlign 属性设置或返回文本内容的当前对齐方式。语法为：
ctx.textAlign = ‘center|end|left|right|start’;
参数说明：
-
start 默认值，表示文本在指定的位置开始。
-
center 表示文本的中心被放置在指定的位置。
-
end 表示文本在指定的位置结束。
-
left 表示文本左对齐。
-
right 表示文本右对齐。
注：使用
fillText()或strokeText()方法在实际地在画布上绘制并定位文本。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
textBaseline 属性
textBaseline 属性设置或返回在绘制文本时的当前文本基线。语法为：
ctx.textBaseline = ‘alphabetic|top|hanging|middle|ideographic|bottom’;
参数说明：
-
alphabetic 表示文本基线是普通的字母基线。默认值。
-
top 表示文本基线是
em方框的顶端。 -
hanging 表示文本基线是悬挂基线。
-
middle 表示文本基线是
em方框的正中。 -
ideographic 表示文本基线是表意基线。
-
bottom 表示文本基线是
em方框的底端。
例子：
对不起，你的浏览器不支持canvas
运行效果为：
图片绘制
在 Terminal 输入以下命令获取图片绘制用到的图片：
wget https://labfile.oss.aliyuncs.com/courses/1248/a.png
使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。
canvas 绘制图片的基本格式为：
//创建一个图片对象
var image = new Image();
//设置图片的路径
image.src = ‘xxx’;
//当图片加载完成后
image.onload = function () {
//绘制图片
ctx.drawImage();
};
语法 1，在画布上定位图像：
ctx.drawImage(img, x, y);
语法 2，在画布上定位图像，并规定图像的宽度和高度：
ctx.drawImage(img, x, y, width, height);
语法 3，剪切图像，并在画布上定位被剪切的部分：
ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
参数说明：
-
img 规定要使用的图像、画布或视频。
-
sx 表示开始剪切的 x 坐标位置。可选值。
-
sy 表示开始剪切的 y 坐标位置。可选值。
-
swidth 表示被剪切图像的宽度。可选值。
-
sheight 表示被剪切图像的高度。可选值。
-
x 表示在画布上放置图像的 x 坐标位置。
-
y 表示在画布上放置图像的 y 坐标位置。
-
width 表示要使用的图像的宽度（伸展或缩小图像）。可选值。
-
height 表示要使用的图像的高度，（伸展或缩小图像）。可选值。
例子 1，在画布上定位图像并作出一个立体的效果：
对不起，你的浏览器不支持canvas
运行效果为：
例子 2，在画布上定位图像，并规定图像的宽度和高度：
对不起，你的浏览器不支持canvas
运行效果为：
例子 3，剪切图像，并在画布上定位被剪切的部分：
对不起，你的浏览器不支持canvas
运行效果为：
视频音频与拖放
======================================================================
引言
在 HTML5 问世之前，如果我们想要在网页上面展示视频音频，经常会使用到的就是 Adobe Flash 这样的插件，很多人可能和我一样遇到过 Flash 插件崩溃的问题，让人相当烦躁，而在 HTML5 中，提供了音频和视频的标准接口使这一局面得到了改观，在这个实验中，我们将为大家介绍如何在网页中播放我们的视频音频文件。同时，我们也会学习 HTML5 对元素的拖放操作。
下面给大家一个在线的音频视频转换网站：http://cn.office-converter.com/
知识点
-
HTML5 视频介绍
-
HTML5 音频介绍
-
HTML5 拖放概述
-
HTML5 拖放使用
拖放操作可以很好的实现与用户的交互，拖放操作会带给用户全新的浏览体验，用户不再是只能对着网页滑动鼠标滚轮，而是可以根据设计，操作网页中的某些元素了。
视频介绍
标准
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
视频格式和浏览器支持如下所示：
例子：
src=“https://labfile.oss.aliyuncs.com/courses/1248/video.ogg”
type=“video/ogg”
/>
src=“https://labfile.oss.aliyuncs.com/courses/1248/video.mp4”
type=“video/mp4”
/>
你的浏览器不支持video元素
注：
<video>与</video>之间插入的内容是供不支持video元素的浏览器显示的。video元素允许多个source元素，source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。
引入单个文件也可以这样写：
<video
src=“https://labfile.oss.aliyuncs.com/courses/1248/video.ogg”
width=“320”
height=“240”
controls=“controls”
你的浏览器不支持video元素
video 标签的属性如下所示：
这些属性设置都很简单，大家可以自行尝试体验一番。
字幕的简单使用
使用常用的 WebVtt 字幕格式，在 <video> 中使用 <track> 元素引入字幕。例如：
src=“https://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt”
srclang=“zh”
kind=“subtitles”
label=“中文”
default
/>
src=“https://labfile.oss.aliyuncs.com/courses/1248/video_en.vtt”
srclang=“en”
kind=“subtitles”
label=“English”
/>
track 元素属性说明：
-
src：指定资源
url。 -
srclang：资源的语言，例如：中文
zh，英文en。 -
kind：默认值是
subtitles字幕，captions标题、音效及其他音频信息，descriptions视频的文本描述，chapters章节导航，metadata元数据。 -
label：选择字幕时候出现的文字。
-
default：
default指的是默认会显示的字幕。例如两个<track>元素，如果都没有default属性，那都不显示，需要用户手动调出。另外，default只能出现在一个<track>元素上。
例子：
首先我们在终端中分别输入以下命令，获取所需字幕文件：
wget https://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt
wget https://labfile.oss.aliyuncs.com/courses/1248/video_en.vtt
<video
src=“https://labfile.oss.aliyuncs.com/courses/1248/video.ogg”
width=“320”
height=“240”
controls=“controls”
你的浏览器不支持video元素
src=“video_ch.vtt”
srclang=“en”
kind=“subtitles”
label=“中文”
default
/>
video_ch.vtt 中的内容为：
WEBVTT 00:00:01.000 --> 00:00:04.000 不准在课堂上打游戏 00:00:05.000 -->
00:00:09.000 好好学习，天天向上！
video_en.vtt 中的内容为：
WEBVTT 00:00:01.000 --> 00:00:04.000 Don’t play games in class！ 00:00:05.000
–> 00:00:09.000 Study hard and make progress every day！
运行效果如下所示：
通过上面的案例，我们了解了简单的视频制作以及为视频添加字幕和切换字幕。
音频介绍
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
音频格式和浏览器支持如下所示：
例子：
src=“https://labfile.oss.aliyuncs.com/courses/1248/video.ogg”
type=“audio/ogg”
/>
src=“https://labfile.oss.aliyuncs.com/courses/1248/phone.mp3”
type=“audio/mpeg”
/>
你的浏览器不支持audio元素
注：
<audio>与</audio>之间插入的内容是供不支持audio元素的浏览器显示的。audio元素允许多个source元素，source元素可以链接不同的音频文件，浏览器将使用第一个可识别的格式。
引入单个文件也可以这样写：
<audio
src=“https://labfile.oss.aliyuncs.com/courses/1248/phone.mp3”
controls=“controls”
你的浏览器不支持video元素
audio 标签的属性如下所示：
拖放概述
拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。
注：
img元素和a元素（必须指定href）默认允许拖放。
在 Terminal 中输入以下命令获取本节使用到的图片：
wget https://labfile.oss.aliyuncs.com/courses/1248/drag-image.png
图片的下载位置，请注意在后续 html 文件所在同目录下。
浏览器支持：
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
**注释：**在 Safari 5.1.2 中不支持拖放。
拖放使用
请把图片拖放到矩形中：
<img
id=“drag1”
src=“drag-image.png”
draggable=“true”
οndragstart=“drag(event)”
/>
运行效果为：
下面将为大家一一介绍拖放是如何实现的。
确定是可拖动的
为了使元素可拖放，首先把 draggable 属性设置为 true，再加上全局事件处理函数 ondragstart，如下所示：
定义拖动数据
每个 drag event 都有一个 dataTransfer 属性保保存事件的数据。这个属性（ DataTransfer 对象）也有管理拖动数据的方法。setData() 方法添加一个项目的拖拽数据，如下面的示例代码所示：
function drag(ev) {
ev.dataTransfer.setData(‘Text’, ev.target.id);
}
在这个例子中数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
定义一个放置区
ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式,如下所示：
function allowDrop(ev) {
ev.preventDefault();
}
进行放置
当放置被拖数据时，会发生 drop 事件。如下所示：
function drop(ev) {
//调用 preventDefault() 来避免浏览器对数据的默认处理
ev.preventDefault();
//通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
var data = ev.dataTransfer.getData(‘Text’);
//被拖数据是被拖元素的 id (“drag1”),把被拖元素追加到放置元素（目标元素）中
ev.target.appendChild(document.getElementById(data));
}
上面只是简单的讲解了一个图片拖放的案例，想要了解更多拖放的知识，请访问：MDN HTML 拖放 API
Web Storage 和 文件上传
=================================================================================
引言
Web Storage 有两种存储数据的新方法，HTML5 Web Storage 的使用可以提高网页的效率，在不影响网站性能的情况下可以存储大量数据。同时，HTML5 中提供了文件操作的 API，使我们不必再借助第三方插件进行文件模块的开发。
知识点
-
Web Storage 概述
-
localStorage 方法
-
sessionStorage 方法
-
HTML5 文件上传概述
-
如何实现文件上传
-
文件读取
HTML5 的存储特性解决了 Cookie 遗留下来的一些限制，可以带给用户更好的使用体验。HTML5 文件操作 API 的出现，使我们网页可以做到跨平台、跨浏览器应用，不再受限于第三方软件的限制。
Web Storage概述
早些时候，本地存储使用的是 cookie。但是 Web 存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。
HTML5 定义了本地存储规范 Web Storage，提供了两种存储类型 API：localStorage 和 sessionStorage。
先说说 cookie：
-
大小的限制：cookie 的大小被限制在 4KB。
-
带宽的限制：只要涉及 cookie 的请求，cookie 数据都会在服务器和浏览器间来回传送。这样无论访问哪个页面，cookie 数据都会消耗网络的带宽。
-
cookie 会频繁的在网络中传送，而且数据在网络中是可见的，因此在不加密的情况下 ，是有安全风险的。
Web Storage 数据存储机制相比于 Cookie 有明显的优势：
-
存储空间的大小一般为 5~10MB，与具体浏览器有关。
-
存储内容仅仅存储在本地客户端，不会被发送到服务器。
-
提供了更丰富、更易用的接口、操作更方便。
localStorage 方法
特点：持久化的本地存储，除非主动手动删除，否则数据一直不会过期。
方法
1.设置
setItem(key,value) // 在本地客户端存储一个字符串类型的数据。
setItem.key=value // 也可以像这样直接存储。
保存数据：
localStorage.setItem(key, value);
保存添加数据例子：
//方法1向本地存储中添加一个名为name,值为"syl"的key-value对象
localStorage.setItem(‘name’, ‘syl’);
//方法2
localStorage[‘price’] = 1314;
//方法3
localStorage.amount = 520;
注：使用
setItem方法保存数据时，将第一个参数key指定为键名，将第二个参数value指定为键值，保存时不允许保存相同的键名，保存后可以修改键值，但不允许改键名（只能重新取键名，然后再保存键值）。
2.获取
getItem(key) // 读取已存储在本地的数据，获取键值。
localStorage.key // 也可以像这样直接获取值。
读取数据：
localStorage.getItem(key);
注：使用
getItem方法读取数据时，将参数指定为键名，返回键值。
3.删除
removeItem(key) // 移除已存储在本地数据，通过键名作为参数删除数据。
localStorage.clear() // 也可以一次性清除
删除单个数据：
localStorage.removeItem(key);
注：通过
key删除本地数据。
例子
简单Web留言本
<input
type=“button”
value=“清空最后一个数据”
οnclick=“clearsingleStorage();”
/>
运行效果如下所示：
sessionStorage 方法
直接关闭页面，再重新运行查看一下效果。
sessionStorage 方法将数据保存在 session 对象中，所谓 session 直译过来就是会话，再通俗一点讲就是指用户在浏览某个网站时，从进入网站到关闭浏览器的这段时间，session 对象可以用来保存在这段时间内所要求保存的任何数据。我们称之为会话级别的本地存储。
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
setItem.key=value // 也可以像这样直接存储。
保存数据：
localStorage.setItem(key, value);
保存添加数据例子：
//方法1向本地存储中添加一个名为name,值为"syl"的key-value对象
localStorage.setItem(‘name’, ‘syl’);
//方法2
localStorage[‘price’] = 1314;
//方法3
localStorage.amount = 520;
注：使用
setItem方法保存数据时，将第一个参数key指定为键名，将第二个参数value指定为键值，保存时不允许保存相同的键名，保存后可以修改键值，但不允许改键名（只能重新取键名，然后再保存键值）。
2.获取
getItem(key) // 读取已存储在本地的数据，获取键值。
localStorage.key // 也可以像这样直接获取值。
读取数据：
localStorage.getItem(key);
注：使用
getItem方法读取数据时，将参数指定为键名，返回键值。
3.删除
removeItem(key) // 移除已存储在本地数据，通过键名作为参数删除数据。
localStorage.clear() // 也可以一次性清除
删除单个数据：
localStorage.removeItem(key);
注：通过
key删除本地数据。
例子
简单Web留言本
<input
type=“button”
value=“清空最后一个数据”
οnclick=“clearsingleStorage();”
/>
运行效果如下所示：
sessionStorage 方法
直接关闭页面，再重新运行查看一下效果。
sessionStorage 方法将数据保存在 session 对象中，所谓 session 直译过来就是会话，再通俗一点讲就是指用户在浏览某个网站时，从进入网站到关闭浏览器的这段时间，session 对象可以用来保存在这段时间内所要求保存的任何数据。我们称之为会话级别的本地存储。
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
