文章目录
什么是Canvas？
canvas 元素用于在网页上绘制图形。
| – |
|---|
| canvas只是图形容器，是一个矩形区域，并没有绘制能力，有一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。 |
| canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 |
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
canvas的座标
通过设置getContext(‘2d’)让canvas获得一个2d环境。
默认情况下canvas 的左上角座标 (0,0)为座标原点，沿x轴向右为正值，沿y轴向下为正值，canvas的转换会对座标系统进行变换。
canvas的颜色、样式和阴影
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回用于阴影的模糊级别 |
| shadowOffsetX | 设置或返回阴影距形状的水平距离 |
| shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建线性渐变（用在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上） |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
canvas的线条样式
| 属性 | 描述 |
|---|---|
| lineCap | 设置或返回线条的结束端点样式 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 |
| lineWidth | 设置或返回当前的线条宽度 |
| miterLimit | 设置或返回最大斜接长度 |
canvas的路径
| 方法 | 描述 |
|---|---|
| fill() | 填充当前绘图（路径） |
| stroke() | 绘制已定义的路径 |
| beginPath() | 起始一条路径，或重置当前路径 |
| closePath() | 创建从当前点回到起始点的路径 |
| moveTo(x,y) | 把路径移动到画布中的指定点，不创建线条 |
| lineTo(x,y) | 添加一个新点，然后在画布中创建从该点到最后指定点的线条 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc(x,y,r,start,stop) | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
| isPointInPath() | 如果指定的点位于当前路径中，则返回 true，否则返回 false |
canvas的矩形
| 方法 | 描述 |
|---|---|
| rect() | 创建矩形 |
| fillRect() | 绘制“被填充”的矩形 |
| strokeRect() | 绘制矩形（无填充） |
| clearRect() | 在给定的矩形内清除指定的像素 |
canvas的转换
| 方法 | 描述 |
|---|---|
| scale() | 缩放当前绘图至更大或更小 |
| rotate() | 旋转当前绘图 |
| translate() | 重新映射画布上的 (0,0) 位置 |
| transform() | 替换绘图的当前转换矩阵 |
| setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
canvas的文本
| 属性 | 描述 |
|---|---|
| font | 设置或返回文本内容的当前字体属性 |
| textAlign | 设置或返回文本内容的当前对齐方式 |
| textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
| 方法 | 描述 |
|---|---|
| fillText(text,x,y) | 在画布上绘制“被填充的”文本 |
| strokeText(text,x,y) | 在画布上绘制文本（无填充） |
| measureText() | 返回包含指定文本宽度的对象 |
canvas的拓展
| 方法 | 描述 |
|---|---|
| drawImage() | 向画布上绘制图像、画布或视频 |
| getContext() | 获得用于在画布上绘图的对象 |
| toDataURL() | 导出在 canvas 元素上绘制的图像 |
toDataURL的拓展
画布允许drawImage()使用跨域 <img> 元素的图像，但是这会污染画布。
一旦画布被污染，就无法读取其数据。例如，不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法。
浏览器为了保护你的隐私，避免未经许可拉取远程网站信息而导致的用户隐私泄露。
通过:
img.setAttribute('crossOrigin', 'anonymous')
可以绕过浏览器。
但是当你的网页上有该图片 <img>时，由于浏览器第一次已经把图片加载并缓存下来，在画布上第二次请求该图片时，不需要再从服务端请求，而直接从缓存里取。
第一次已经把图片加载时是没带img.setAttribute(‘crossOrigin’, ‘anonymous’)，在画布上第二次请求该图片从缓存里取，拿到的是不带img.setAttribute(‘crossOrigin’, ‘anonymous’)的图片，此时不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法。
解决办法是在画布上第二次请求该图片时，图片链接携带随机数（比如时间戳），这样该图片会去服务器加载，并通过img.setAttribute(‘crossOrigin’, ‘anonymous’)绕过浏览器了。
canvas与SVG
| Canvas | SVG |
|---|---|
| 通过 JavaScript 来绘制 2D 图形 | 通过XML 描述 2D 图形 |
| 依赖分辨率 | 不依赖分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 弱的文本渲染能力 | 复杂度高会减慢渲染速度 |
| 能够以 .png 或 .jpg 格式保存结果图像 | |
| 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不适合游戏应用 |
HTML 知识题
| 题目 | 答案 |
|---|---|
| HTML5 中的 <canvas> 元素用于？ | 绘制图形 |
| 在 HTML5 中，哪个属性用于规定输入字段是必填的？ | required |
| HTML5具有的存储类型？ | sessionStorage、localStorage、Cookies |
| 在<video>中，使媒介文件循环播放的属性 | loop |
| 在 <html> 中，设置网页的背景图的属性是 | background |
| 在<table>中，设置表格的背景颜色的属性是？ | bgcolor |
| 图像无法显示时的替代文本的属性是？ | alt |