未完。。。
diff --git a/atom.xml b/atom.xml index fee3bf0..a75bc29 100644 --- a/atom.xml +++ b/atom.xml @@ -6,7 +6,7 @@ -- canvas和svg之间一个重要的区别：使用canvas来绘制图形是通过调用它提供的方法，而使用svg绘制图形是通过构建一棵XML元素树来实现
二、canvas基础
note: (摘自《javascript权威指南》)
1、定义上下文对象
- 大部分画布绘制的API都不是在
<canvas>元素自身上定义的，而是定义在一个”绘制上下文”对象上，获取该对象可以通过调用画布的getContext()方法。1
2let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
2、 绘制线段和填充多边形
- 图形属性
- fillStyle：填充颜色/渐变/图案等样式
- font：绘制文本css样式
- globalAlpha：绘制像素时要添加的透明度 (?)
- globalCompositeOperation：如何合并新的像素点和下面的像素点 (?)
- lineCap：如何渲染线段末端
- lineJoin：如何渲染顶点
- lineWidth：外框线的宽度
- miterLimit：紧急斜接顶点的最大长度 (?)
- textAlign：文本水平对齐方式
- textBaseline：文本垂直对齐方式
- shadowBlur：阴影的清晰或模糊程度
- shadowColor：下拉阴影的颜色
- shadowOffsetX：阴影的水平偏移量
- shadowOffsetY：阴影的垂直偏移量
- strokeStyle：勾勒线段时的颜色/渐变/图案等样式
- 案例（最后一个没有效果？）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37// 定义一个以(x, y)为中心， 半径为r的规则n边形
// 每个顶点都是均匀分布在圆周上
// 将第一个顶点放置在最上面，或者指定一定角度
// 除非最后一个参数是true，否则顺时针旋转
function polygon(c, n, x, y, r, angle, counterclockwise){
angle = angle || 0;
counterclockwise = counterclockwise || false;
ctx.moveTo(x + r * Math.sin(angle), // 从第一个顶点开始一条新的路径
y - r * Math.cos(angle)); // 使用三角形计算位置
let delta = 2 * Math.PI / n; // 两个顶点之间的夹角
for(let i = 1; i < n; i ++){ // 循环剩余的每个顶点
angle += counterclockwise ? -delta : delta; // 调整角度
ctx.lineTo(x + r * Math.sin(angle), // 以下个顶点为端点添加线段
y - r * Math.cos(angle));
}
ctx.closePath(); // 将最后一个顶点和起点连接起来
}
ctx.beginPath();
let x = 50;
polygon(ctx, 3, x, 70, 50); // 三角形
polygon(ctx, 4, x + x * 2, 60, 50, Math.PI / 4); // 正方形
polygon(ctx, 5, x + x * 3, 55, 50); // 五边形
polygon(ctx, 6, x + x * 4, 53, 50, Math.PI / 6); // 六边形
polygon(ctx, 4, x + x * 5, 53, 20, Math.PI / 4, true); // 六边形中的小正方形
ctx.fillStyle() = '#ccc'; // 内部填充颜色
ctx.stockStyle = '#oo8'; // 边框颜色
ctx.lineWidth = 5; // 边框跨度
ctx.fill(); // 填充
ctx.stroke(); // 勾勒外边框
3、画布的尺寸与坐标
(注：图片来自MDN)
4、坐标系变换（占坑）
5、绘制和填充曲线
- arc(ox, oy, radius, startRadian, endRadian, [true | false])： 在当前子路径中添加一条弧
- 参数：
- ox: 圆心x坐标
- oy: 圆心y坐标
- radius: 半径
- startRadian: 起始弧
- endRadian: 结束弧
- true: 逆时针 | false: 顺时针
- 参数：
- arcTo(x1, y1, x2, y2, radius):绘制一条直线和一段圆弧(?)
- x1: 起点x坐标
- y1: 起点y坐标
- x2: 终点x坐标
- y2: 终点y坐标
- radius:半径
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：实现在当前子路径中添加一个新的点，并利用三次贝塞尔曲线将它和当前点相连(?)
- cp1x: 第一个控制点x坐标
- cp1y: 第一个控制点y坐标
- cp2x: 第二个控制点x坐标
- cp2y: 第二个控制点y坐标
- x: 结束点x坐标
- y: 结束点y坐标
quadraticCurveTo(cpx, cpy, x, y)：与bezierCurveTo()类似，不同的是它使用的是二次贝塞尔曲线而不是三次贝塞尔曲线并且只有一个控制点(?)
- cpx: 控制点x坐标
- cpy: 控制点y坐标
- x: 结束点x坐标
- y: 结束点y坐标
- 示例：
1
2
3
4
5
6
7
8// 将角度转化成弧度制
function rads(x){
return Math.PI * x / 180;
}
ctx.beginPath();
ctx.arc(75, 100, 50, 0, rads(360), false); // 圆心位于(75, 100), 半径为50, 从0°到360°顺时针旋转
ctx.closePath();
(效果图)
6、矩形
- fillRect(x,y,width,height): 使用当前点的fillStyle来填充指定的矩形
- 参数:
- x:矩形左上角的x坐标
- y: 矩形左上角的y坐标
- width: 矩形的宽度
- height: 矩形的高度
- 参数:
- strokeRect(x,y,width,height): 使用当前的strokeStyle和其他线段的属性来勾勒指定矩形的外边框，参数与fillRect()相同
- clearRect(x,y,width,height): 清除矩形，参数与fillRect()相同
- rect(x,y,width,height): 绘制矩形，会对当前路径产生影响，会在指定的矩形添加到当前路径的子路径中，参数与fillRect()相同
- canvas和svg之间一个重要的区别：使用canvas来绘制图形是通过调用它提供的方法，而使用svg绘制图形是通过构建一棵XML元素树来实现
二、canvas基础
note: (摘自《javascript权威指南》)
1、定义上下文对象
- 大部分画布绘制的API都不是在
<canvas>元素自身上定义的，而是定义在一个”绘制上下文”对象上，获取该对象可以通过调用画布的getContext()方法。1
2let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
2、 绘制线段和填充多边形
- 图形属性
- fillStyle：填充颜色/渐变/图案等样式
- font：绘制文本css样式
- globalAlpha：绘制像素时要添加的透明度 (?)
- globalCompositeOperation：如何合并新的像素点和下面的像素点 (?)
- lineCap：如何渲染线段末端
- lineJoin：如何渲染顶点
- lineWidth：外框线的宽度
- miterLimit：紧急斜接顶点的最大长度 (?)
- textAlign：文本水平对齐方式
- textBaseline：文本垂直对齐方式
- shadowBlur：阴影的清晰或模糊程度
- shadowColor：下拉阴影的颜色
- shadowOffsetX：阴影的水平偏移量
- shadowOffsetY：阴影的垂直偏移量
- strokeStyle：勾勒线段时的颜色/渐变/图案等样式
- 案例（最后一个没有效果？）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37// 定义一个以(x, y)为中心， 半径为r的规则n边形
// 每个顶点都是均匀分布在圆周上
// 将第一个顶点放置在最上面，或者指定一定角度
// 除非最后一个参数是true，否则顺时针旋转
function polygon(c, n, x, y, r, angle, counterclockwise){
angle = angle || 0;
counterclockwise = counterclockwise || false;
ctx.moveTo(x + r * Math.sin(angle), // 从第一个顶点开始一条新的路径
y - r * Math.cos(angle)); // 使用三角形计算位置
let delta = 2 * Math.PI / n; // 两个顶点之间的夹角
for(let i = 1; i < n; i ++){ // 循环剩余的每个顶点
angle += counterclockwise ? -delta : delta; // 调整角度
ctx.lineTo(x + r * Math.sin(angle), // 以下个顶点为端点添加线段
y - r * Math.cos(angle));
}
ctx.closePath(); // 将最后一个顶点和起点连接起来
}
ctx.beginPath();
let x = 50;
polygon(ctx, 3, x, 70, 50); // 三角形
polygon(ctx, 4, x + x * 2, 60, 50, Math.PI / 4); // 正方形
polygon(ctx, 5, x + x * 3, 55, 50); // 五边形
polygon(ctx, 6, x + x * 4, 53, 50, Math.PI / 6); // 六边形
polygon(ctx, 4, x + x * 5, 53, 20, Math.PI / 4, true); // 六边形中的小正方形
ctx.fillStyle() = '#ccc'; // 内部填充颜色
ctx.stockStyle = '#oo8'; // 边框颜色
ctx.lineWidth = 5; // 边框跨度
ctx.fill(); // 填充
ctx.stroke(); // 勾勒外边框
3、画布的尺寸与坐标
(注：图片来自MDN)
4、坐标系变换（占坑）
5、绘制和填充曲线
- arc(ox, oy, radius, startRadian, endRadian, [true | false])： 在当前子路径中添加一条弧
- 参数：
- ox: 圆心x坐标
- oy: 圆心y坐标
- radius: 半径
- startRadian: 起始弧
- endRadian: 结束弧
- true: 逆时针 | false: 顺时针
- 参数：
- arcTo(x1, y1, x2, y2, radius):绘制一条直线和一段圆弧(?)
- x1: 起点x坐标
- y1: 起点y坐标
- x2: 终点x坐标
- y2: 终点y坐标
- radius:半径
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：实现在当前子路径中添加一个新的点，并利用三次贝塞尔曲线将它和当前点相连(?)
- cp1x: 第一个控制点x坐标
- cp1y: 第一个控制点y坐标
- cp2x: 第二个控制点x坐标
- cp2y: 第二个控制点y坐标
- x: 结束点x坐标
- y: 结束点y坐标
quadraticCurveTo(cpx, cpy, x, y)：与bezierCurveTo()类似，不同的是它使用的是二次贝塞尔曲线而不是三次贝塞尔曲线并且只有一个控制点(?)
- cpx: 控制点x坐标
- cpy: 控制点y坐标
- x: 结束点x坐标
- y: 结束点y坐标
- 示例：
1
2
3
4
5
6
7
8// 将角度转化成弧度制
function rads(x){
return Math.PI * x / 180;
}
ctx.beginPath();
ctx.arc(75, 100, 50, 0, rads(360), false); // 圆心位于(75, 100), 半径为50, 从0°到360°顺时针旋转
ctx.closePath();
(效果图)
6、矩形
- fillRect(x,y,width,height): 使用当前点的fillStyle来填充指定的矩形
- 参数:
- x:矩形左上角的x坐标
- y: 矩形左上角的y坐标
- width: 矩形的宽度
- height: 矩形的高度
- 参数:
- strokeRect(x,y,width,height): 使用当前的strokeStyle和其他线段的属性来勾勒指定矩形的外边框，参数与fillRect()相同
- clearRect(x,y,width,height): 清除矩形，参数与fillRect()相同
- rect(x,y,width,height): 绘制矩形，会对当前路径产生影响，会在指定的矩形添加到当前路径的子路径中，参数与fillRect()相同
未完。。。
]]>