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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
| let canvas = document.getElementById('canvas')
console.log(canvas.getContext)
if(canvas.getContext){
let ctx = canvas.getContext('2d')
// 线条样式
// lineWidth 设置当前绘线的粗细。属性值必须为正数。默认值是 1.0。
// lineCap
// lineCap 设置线段端点显示的样子。可选值为：butt，round 和 square。默认是 butt。
// lineJoin
// lineJoin 该属性可以设置两线段连接处所显示的样子。可选值为：round, bevel 和 miter。默认是
// ctx.lineWidth = 10;
// ctx.lineCap='round'
// ctx.moveTo(50,50)
// ctx.lineTo(300,300)
// ctx.stroke()
// ctx.beginPath()
// ctx.lineWidth = 10;
// ctx.lineJoin='miter'
// ctx.moveTo(50, 20);
// ctx.lineTo(100, 60);
// ctx.lineTo(150, 20);
// ctx.lineTo(200, 60);
// ctx.lineTo(250, 20);
// ctx.stroke();
// ctx.closePath();
// miterLimit
// miterLimit 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
// 线段之间夹角比较大时，交点不会太远，但随着夹角变小，交点距离会呈指数级增大。
// 如果交点距离大于miterLimit值，连接效果会变成了 lineJoin = bevel 的效果。
// ctx.beginPath()
// ctx.lineWidth = 5;
// ctx.lineJoin='miter'
// ctx.miterLimit = 10
// ctx.moveTo(0, 100);
// for (i = 0; i < 30 ; i++) {
// var dy = i % 2 == 0 ? 200 : 100;
// ctx.lineTo(Math.pow(i, 1.5) * 2, dy);
// }
// ctx.stroke();
// ctx.closePath();
// setLineDash/getLineDash
// setLineDash 可以设置当前虚线样式。
// getLineDash 则是返回当前虚线设置的样式，长度为非负偶数的数组。
// ctx.setLineDash([5, 10, 20]);
// console.log(ctx.getLineDash()); // [5, 10, 20, 5, 10, 20]
// ctx.beginPath();
// ctx.moveTo(0,100);
// ctx.lineTo(400, 100);
// ctx.stroke();
// // 再绘制一条虚线
// ctx.setLineDash([5, 10, 20, 40]);
// console.log(ctx.getLineDash()); // [5, 10, 20, 40]
// ctx.beginPath();
// ctx.moveTo(0,200);
// ctx.lineTo(400, 200);
// ctx.stroke();
// lineDashOffset
// lineDashOffset 设置虚线样式的起始偏移量
// 绘制一条虚线
// ctx.setLineDash([5, 10, 20]);
// console.log(ctx.getLineDash()); // [5, 10, 20, 5, 10, 20]
// ctx.beginPath();
// ctx.moveTo(0,100);
// ctx.lineTo(400, 100);
// ctx.stroke();
// // 再绘制一条虚线
// ctx.setLineDash([5, 10, 20, 40]);
// console.log(ctx.getLineDash()); // [5, 10, 20, 40]
// ctx.beginPath();
// ctx.moveTo(0,200);
// ctx.lineTo(400, 200);
// ctx.stroke();
// 设置 globalAlpha 属性或者使用有透明度的样式作为轮廓或填充都可以实现
// 绘制一个矩形
// ctx.beginPath();
// // 指定透明度的填充样式
// ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
// ctx.fillRect(10,10,300,100);
// // 绘制一个矩形边框
// ctx.beginPath();
// // 指定透明度的描边样式
// ctx.strokeStyle = "rgba(255, 0, 0, 0.7)";
// ctx.strokeRect(10, 90, 100, 300);
// // 绘制一个圆
// ctx.beginPath()
// ctx.fillStyle = "rgba(255, 255, 0, 1)";
// // 设置透明度值
// ctx.globalAlpha = 0.5;
// ctx.arc(200, 200, 100, 0, Math.PI*2, true);
// ctx.fill();
// 渐变
// 线性渐变和径向渐变
// 线性渐变
// 语法： createLinearGradient(x1, y1, x2, y2)，参数分别为 起点的坐标和终点的坐标。
// 在渐变的设置中还需要一个方法来添加渐变的颜色，语法为：gradient.addColorStop(offset, color)，
// 其中color就是颜色，offset 则是颜色的偏移值，只为0到1之间的数。
// 创建渐变
// var gradient1 = ctx.createLinearGradient(10, 10, 400, 10);
// gradient1.addColorStop(0, "#00ff00");
// gradient1.addColorStop(1, "#ff0000");
// var gradient2 = ctx.createLinearGradient(10, 10, 400, 10);
// // 从0.5的位置才开始渐变
// gradient2.addColorStop(0.5, "#00ff00");
// gradient2.addColorStop(1, "#ff0000");
// ctx.beginPath()
// ctx.fillStyle = gradient1;
// ctx.fillRect(10, 10, 400, 100);
// ctx.beginPath();
// ctx.fillStyle = gradient2;
// ctx.fillRect(10, 150, 400, 100);
// 径向渐变
// ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)，参数分别为开始圆的坐标和半径以及结束圆的坐标和半径。
// 结束坐标为点
// var gradient1 = ctx.createRadialGradient(100, 100, 100, 100, 100, 0);
// gradient1.addColorStop(0, "#ff770f");
// gradient1.addColorStop(1, "#ffffff");
// // 结束坐标为半径30的圆
// var gradient2 = ctx.createRadialGradient(320, 100, 100, 320, 100, 30);
// gradient2.addColorStop(0, "#ff770f");
// gradient2.addColorStop(1, "#ffffff");
// // 从0.5的位置才开始渲染
// var gradient3 = ctx.createRadialGradient(100, 320, 100, 100, 320, 0);
// gradient3.addColorStop(0.5, "#ff770f");
// gradient3.addColorStop(1, "#ffffff");
// // 开始坐标和结束坐标不一样
// var gradient4 = ctx.createRadialGradient(320, 320, 100, 250, 250, 0);
// gradient4.addColorStop(0, "#ff770f");
// gradient4.addColorStop(1, "#ffffff");
// ctx.beginPath();
// ctx.fillStyle = gradient1;
// ctx.fillRect(10, 10, 200, 200);
// ctx.beginPath();
// ctx.fillStyle = gradient2;
// ctx.fillRect(220, 10, 200, 200);
// ctx.beginPath();
// ctx.fillStyle = gradient3;
// ctx.fillRect(10, 220, 200, 200);
// ctx.beginPath();
// ctx.fillStyle = gradient4;
// ctx.fillRect(220, 220, 200, 200);
// Canvas中想绘制图案效果，需要用 createPattern 方法来实现。
// 语法：createPattern(image, type)，参数分别为：Image 参数可以是一个 Image 对象，也可以是一个 canvas 对象，Type 为图案绘制的类型，可用的类型分别有：repeat，repeat-x，repeat-y 和 no-repeat。
// 创建一个 image对象
// var img = new Image();
// img.src = "./image.png";
// img.onload = function() {
// // 图片加载完以后
// // 创建图案
// var ptrn = ctx.createPattern(img, 'no-repeat');
// ctx.fillStyle = ptrn;
// ctx.fillRect(0, 0, 500, 500);
// }
}
|
