共计 5447 个字符，预计需要花费 14 分钟才能阅读完成。
介绍
SVG 是构建 XML 树的方式来达到绘制图形的，canvas 是通过调用相关的方法来绘制图形的。区别：SVG 绘制图形，通过移除或者更改 DOM 方式来而使用 canvas 需要把图片从新擦除。绘制的 API 在绘制上下文中定义。而不在画布中定义。需要获得上下文对象的时候，需要调用画布的 getContext 方法，获得绘画的上下文。
画布元素和上下文，属于两个不同的对象，其中画布元素为 canvas 画布，而上下文对象为绘制需要的上下文。关于 3D 图形，即，webGL 为封装了基本的 OPENGL，当调用 webGL 的时候，其浏览器会调用 OpenGL 相关的 API
绘制圆
<!DOCTYPE html>
<html lang=”zh_CN” xmlns=”http://www.w3.org/1999/html”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
</head>
<body>
<div> 第一个园 </br>
<canvas id=”square” width=”10″ height=”100″>
</canvas>
</div>
<div>
第二个园
<canvas id=”circle” width=”10″ height=”10″>
</canvas>
</div>
<script src=”./js/index.js” charset=”UTF-8″></script>
</body>
</html>
// 获取画布元素
let canvas = document.getElementById(“square”);
// 获取绘制 2D 元素上下文
let context = canvas.getContext(“2d”);
// 设置填充颜色为红色
context.fillStyle = “#f00”;
// 填充一个正方形
context.fillRect(10,0,10,10);
绘制线段，填充多边形
// 获取画布元素
let canvas = document.getElementById(“square”);
// 获取绘制 2D 元素上下文
let context = canvas.getContext(“2d”);
// 开始一条路径
context.beginPath();
// 从 100,100 开始定义一条新的子路径
context.moveTo(100,100);
// 从 100 100 到 200 200 绘制一条线段
context.lineTo(200,200);
// 从 200 200 到 100 200 绘制一条线段
context.lineTo(100,200);
// 从 100 200 到 100 100 绘制一条路径
context.lineTo(100,100);
// 绘制边
context.stroke();
// 进行填充
context.fill();
绘制多边形
以五边形为例子，
var canvas = document.getElementById(“square”);
var context = canvas.getContext(“2d”);
// 绘制一个以 100,100 为中心，半径为 20 的柜子 N 变形，每个定点均匀分布在圆角上，第一个定点放置在最上下
// 偏转角度为 0
// 开始定义一条子路径
context.moveTo(100 + 20 * Math.sin(0), 100 – 20 * Math.cos(0));
// 计算两个顶点之间夹角
// 其中 2π 为一个园，除以边数，得到需要旋转的角度
var delta = 2 * Math.PI/5;
console.log(delta);
// 循环剩余每个顶点
var angle = 0;
for(var i = 1; i < 5; i++){
// 角度累加
angle += delta;
// 通过旋转绘制下一个顶点，不断的旋转绘制
context.lineTo(100 + 20 * Math.sin(angle), 100 – 20*Math.cos(angle));
}
// 最后一个顶点和起点进行连接
context.closePath();
// 从新开始一条新路径
context.stroke();
context.fill();
同理，画圆
var canvas = document.getElementById(“square”);
var context = canvas.getContext(“2d”);
// 绘制一个以 100,100 为中心，半径为 20 的柜子 N 变形，每个定点均匀分布在圆角上，第一个定点放置在最上下
// 偏转角度为 0
// 开始定义一条子路径
context.moveTo(100 + 20 * Math.sin(0), 100 – 20 * Math.cos(0));
// 计算两个顶点之间夹角
// 其中 2π 为一个园，除以边数，得到需要旋转的角度
var delta = 2 * Math.PI/500000;
console.log(delta);
// 循环剩余每个顶点
var angle = 0;
for(var i = 1; i < 500000; i++){
// 角度累加
angle += delta;
// 通过旋转绘制下一个顶点，不断的旋转绘制
context.lineTo(100 + 20 * Math.sin(angle), 100 – 20*Math.cos(angle));
}
// 最后一个顶点和起点进行连接
context.closePath();
// 从新开始一条新路径
context.stroke();
context.fill();
非零绕数原则
要检测一个点 p 是否在路径内部，使用非零绕数原则，即，一条从点 p 出发沿着任意方向无限延伸，或者一直延伸到路径所在的区域外某点的射线，现在从 0 开始初始化一个计数器，对穿过这条射线的路径进行枚举，每当一条路径顺时针方向穿过射线的时候，计数器加 1，逆时针减 1，最后，枚举完所有路径以后，如果计时器的值不是 0，那么就认为 p 在路径内，反过来，计数器的值为 0，p 在路径外。
js 根据非零绕数原则确定那个在路径内，那个在路径外，用于进行填充。
图形属性
可以通过设置画布上下文的 fillStyle 等属性，设置图形的属性，例如对画布上下文的 fillStyle 的属性进行设置，即，可以设置出填充时的颜色，渐变，图案等样式。
对于 canvas 来说，每次获取上下文对象的时候，都会返回同一个上下文对象，即，上下文对象为单例的。
还可以使用 save 方法，把当前的状态，压入已经保存的栈中，调用 restore 方法，把状态进行恢复，即弹栈。
画布尺寸坐标
画布的默认的坐标系为左上角的坐标原点 (0,0)，右边数值大，下数值大，使用浮点数指定坐标，但不会自动转换为整数，会用反锯齿的方式，模拟填充部分元素。
画布尺寸不能随意改变，对任意属性进行操作，都会清空整个画布。
坐标系变换
每一个点的坐标都会映射到 css 像素上，css 像素会映射到一个或多个设备像素。画布中的特定操作，属性使用默认坐标系。画布还有当前变换矩阵。画布还有当前变换矩阵，当前变换矩阵作为图形状态的一部分。矩阵定义了当前画布的坐标系。画布的操作会把该点映射到当前的坐标系中。
坐标变换
当调用 c.translate(dx,dy) 方法的时候，会进行如下变换
translate 会进行坐标的上下移动
x’ = x + dy;
y’ = y + dy;
缩放如要进行缩放，进行的是如下的变换
x’ = sx * x;
y’ = sy * y;
进行旋转操作，进行的是如下变换
x’ = x * cos(a) – y * sin(a);
y’ = y * cos(a) – x * sin(a);
如果要先变换再伸缩，进行如下变换需要先把现有坐标系映射成为坐标系中的点 x’，y’ 然后再变换到 x‘’，y‘’
x” = sx*x + dx;
y” = sy*y + dy;
如果变换顺序相反进行如下变换
x” = sx*(x + dx);
y” = sy*(y + dy);
这种变换称为仿射变换，并且仿射变换会修改点的距离和线段间的夹角。对于平行线来说，仿射变换也会保持平行。仿射变换用 6 个参数描述成为如下表述
x’ = ax + cy + e;
y’ = bx + dy + f;
通过传入参数实现仿射变换
对于坐标变换来说，除非进行刷新，否则，已经绘制的图形，不会进行消失，所有的变换，都不能对已经绘制的图形进行更改。栗子如下
var canvas = document.getElementById(“square”);
var context = canvas.getContext(“2d”);
// 通过坐标变换实现科赫雪花
// 开始一条路径
context.beginPath();
// 开始绘制子路径
context.moveTo(100,100);
// 继续绘制
context.lineTo(200,200);
// 继续绘制
context.lineTo(200,200);
// 进行绘制边
context.stroke();
context.translate(200,200);
// 开始一条路径
context.beginPath();
// 开始绘制子路径
context.moveTo(100,100);
// 继续绘制
context.lineTo(200,200);
// 继续绘制
context.lineTo(200,200);
// 进行绘制边
context.stroke();
已经绘制的图形不会进行改变，改变的是已经绘制的图形
科赫雪花
var canvas = document.getElementById(“square”);
var context = canvas.getContext(“2d”);
// 通过坐标变换实现科赫雪花
// 当前状态入栈
function leg(n) {
// 保存状态
context.save();
// 递归画
if(n == 0){
context.lineTo(50, 0);
}else{
// 定义为 v 字型
context.scale(1/2,1/2);
// 递归第一条
context.rotate(60 * (Math.PI / 180));
leg(n – 1);
context.rotate(-120 * (Math.PI / 180));
leg(n – 1);
}
// 坐标恢复变换
context.restore();
// 恢复下一个坐标为 0,0
context.translate(50, 0);
}
context.save();
context.moveTo(50, 50);
// 绘制第一条
leg(1);
context.stroke();
绘制填充曲线
绘制一些常见的图形
var canvas = document.getElementById(“square”);
var context = canvas.getContext(“2d”);
// 工具函数，角度转弧度
function rads(x) {
return Math.PI * x / 180;
}
// 绘制园
context.beginPath();
context.arc(100,100,40, 0, rads(360), false);
context.stroke();
context.fill();
同理绘制贝塞尔曲线也是同理。
颜色，透明度，渐变，图案
绘制一个渐变需要使用 createLinearGradient 获取一个进行渐变的上下文，对这个上下文进行处理。然后其颜色设置为这个渐变的上下文，即，fillStyle 属性。
线段绘制
封顶
对于线段，有三种封顶方式，即，butt，square，round 在绘制图形以后，会参数尖角，圆角，平角，三种。lineCap 属性
文本
和 css 类似，基线问题。
裁剪
直接调动 clip 即可，当前路径也会被裁剪进入，路径外的统统不会显示。
阴影
设置 shadow 属性即可
图片
画布 API 支持位图图片，同时也支持 canvas 导出成为图片。
// 创建一个 img 元素
let img = document.createElement(“img”);
// 设置 src 属性
img.src = canvas.toDataURL();
// 追加到文档后面
document.body.appendChild(img);
合成
一些 api 不在阐述
像素操作
调用 getImageDate 方法返回 ImageDate 对象使用 createImageDate() 可以创建像素容器进行动态模糊先获取像素的 ImageDate 对象，然后再获取该对象的 data 属性，该 data 为一个数组。为一个维数组。每四个元素代表红色分量，绿色分量，蓝色分量，透明度分量。（Alpha 分量）其色素直为 0 -1，即，数组元素中保存的数组为色素值。每四个每四个元素遍历。然后把其色素值的 1 / n + 上一个色块的 m /n 然后赋值给新的色块，代码如下
// row 为行数
for(var row = 0; row < height; row++){
// 获得每行第二个元素的偏移量，其中 width 为行的色素块。
var i = row * width * 4;
// 每 4 个的色素值进行处理
for(var col = 1; col < width; col++, i+=4){
// 对红色分量处理
data[i] = (data[i] + data[i – 4] * m) / n;
// 对绿色分量处理
data[i + 1] = (data[i + 1] + data[i + 1 – 4] * m) / n;
// 对蓝色分量处理
data[i + 2] = (data[i + 2] + data[i + 2 – 4] * m) / n;
// 对透明度分量处理
data[i + 3] = (data[i + 3] + data[i + 3 – 4] * m) / n;
}
}
然后把其色素块进行复制回去即可。其中每个像素占据一个字节，一个四个字节。
命中检测
isPointInPath 方法用来确定一个点是否落在当前路径中。即命中检测。
命中检测可以和鼠标事件相互转化
但是坐标需要进行转换。
