-
Notifications
You must be signed in to change notification settings - Fork 7
/
color-style.html
71 lines (67 loc) · 2.74 KB
/
color-style.html
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
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//fillStyle
// for (let i = 0; i < 6; i++) {
// for (let j = 0; j < 6; j++) {
// ctx.fillStyle = `rgb(${Math.floor(255-42.5*i)},${Math.floor(255-42.5*j)},0)`
// ctx.fillRect(j*25,i*25,25,25)
// }
// }
//strokeStyle
// for (let i = 0; i < 6; i++) {
// for (let j = 0; j < 6; j++) {
// ctx.strokeStyle = `rgb(${Math.floor(255-42.5*i)},${Math.floor(255-42.5*j)},0)`
// ctx.beginPath()
// ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true)
// ctx.stroke()
// }
// }
// globalAlpha
// 画背景
// ctx.fillStyle = '#FD0';
// ctx.fillRect(0, 0, 75, 75);
// ctx.fillStyle = '#6C0';
// ctx.fillRect(75, 0, 75, 75);
// ctx.fillStyle = '#09F';
// ctx.fillRect(0, 75, 75, 75);
// ctx.fillStyle = '#F30';
// ctx.fillRect(75, 75, 75, 75);
// ctx.fillStyle = '#FFF';
// // 设置透明度值
// ctx.globalAlpha = 0.2;
// // 画半透明圆
// for (var i = 0; i < 7; i++) {
// ctx.beginPath();
// ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
// ctx.fill();
// }
// rgba()
// 画背景
ctx.fillStyle = 'rgb(255,221,0)';
ctx.fillRect(0, 0, 150, 37.5);
ctx.fillStyle = 'rgb(102,204,0)';
ctx.fillRect(0, 37.5, 150, 37.5);
ctx.fillStyle = 'rgb(0,153,255)';
ctx.fillRect(0, 75, 150, 37.5);
ctx.fillStyle = 'rgb(255,51,0)';
ctx.fillRect(0, 112.5, 150, 37.5);
// 画半透明矩形
for (var i = 0; i < 10; i++) {
ctx.fillStyle = 'rgba(255,255,255,' + (i + 1) / 10 + ')';
for (var j = 0; j < 4; j++) {
ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5)
}
}
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>