-
Notifications
You must be signed in to change notification settings - Fork 40
/
Copy pathcanvas.html
139 lines (124 loc) · 5.28 KB
/
canvas.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
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
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="app/lib/bootstrap/css/bootstrap.css"/>
<style type="text/css">
canvas {
border: #008000 1px solid;
}
</style>
</head>
<body>
<div class="container">
<h1>Canvas Example </h1>
<div class="row">
<div class="col-md-6">
<canvas id="canvas1" width="550" height="300"></canvas>
</div>
<div class="col-md-6">
<div class="btn-group">
<button class="btn btn-success" id="btn1">
1.绘直线
</button>
<button class="btn btn-success" id="btn2">
2.绘矩形
</button>
<button class="btn btn-success" id="btn3">
3.绘文本
</button>
<button class="btn btn-success" id="btn4">
4.绘圆形
</button>
<button class="btn btn-success" id="btn5">
5.渐变色
</button>
<button class="btn btn-success" id="btn6">
6.设置阴影
</button>
</div>
</div>
</div>
</div>
<script src="app/lib/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script src="app/lib/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function randomNumber(number) {
return Math.floor(Math.random() * number);
}
$(function() {
var canvas = document.getElementById("canvas1");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
console.log(canvas, ctx);
var width = canvas.width, height = canvas.height;
console.log("width:%d height:%d", width, height);
$('#btn1').click(function() {
var x = randomNumber(width / 2);
var y = randomNumber(height / 2);
var offset = randomNumber(100);
console.log("width:%d height:%d offset:%d", x, y, offset);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(Math.abs(x - offset), Math.abs(y - offset));
ctx.lineWidth = 1.0;
ctx.strokeStyle = '#B266B2';
ctx.stroke();
});
$('#btn2').click(function() {
var x = randomNumber(width);
var y = randomNumber(height);
var offset = randomNumber(100);
ctx.fillStyle = '#00AA00';
ctx.fillRect(x, y, offset, offset);
});
$('#btn3').click(function() {
var x = randomNumber(width);
var y = randomNumber(height);
var text = 'Number : ' + randomNumber(100);
ctx.font = '16px 微软雅黑';
ctx.textAlign = 'left';
ctx.fillStyle = '#AC2925';
ctx.fillText(text, x, y);
});
$('#btn4').click(function() {
var x = randomNumber(width);
var y = randomNumber(height);
var radius = randomNumber(50);
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, true);
ctx.fillStyle = "#31B0D5";
ctx.fill();
});
$('#btn5').click(function() {
var myGradient = ctx.createLinearGradient(0, 0, 0, 160);
myGradient.addColorStop(0, "#AC2925");
myGradient.addColorStop(1, "#31B0D5");
var x = randomNumber(width);
var y = randomNumber(height);
var offset = randomNumber(100);
ctx.fillStyle = myGradient;
ctx.fillRect(x, y, offset, offset);
});
$('#btn6').click(function() {
ctx.shadowOffsetX = 5;
// 设置水平位移
ctx.shadowOffsetY = 5;
// 设置垂直位移
ctx.shadowBlur = 5;
// 设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)";
// 设置阴影颜色
var x = randomNumber(width);
var y = randomNumber(height);
var offset = randomNumber(100);
ctx.fillStyle = "#31B0D5";
ctx.fillRect(x, y, offset, offset);
});
});
</script>
</body>
</html>