Skip to content

Commit c054c88

Browse files
committed
small adjust
1 parent c204c46 commit c054c88

File tree

567 files changed

+11907
-8402
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

567 files changed

+11907
-8402
lines changed
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<body>
44
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
5-
您的浏览器不支持 HTML5 canvas 标签。
5+
您的浏览器不支持 HTML5 canvas 标签。
66
</canvas>
77
</body>
88
</html>
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<html>
2+
<head>
3+
4+
</head>
5+
<body style="margin:0px;">
6+
<div>
7+
<div style="width:230px;height:20px;text-align:center;clear:both">X</div>
8+
<div style="width:20px;padding-top:40px;float:left">Y</div>
9+
<div style="width:402px;float:left">
10+
<iframe src="tryhtml5_canvas_coordinates.html" frameborder="0"
11+
style="border:0;overflow:hidden;width:400px;height:120px;"></iframe>
12+
</div>
13+
14+
15+
</div>
16+
17+
</body>
18+
</html>
19+
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
5+
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
6+
您的浏览器不支持 HTML5 canvas 标签。
7+
</canvas>
8+
9+
<script>
10+
11+
var c = document.getElementById("myCanvas");
12+
var ctx = c.getContext("2d");
13+
ctx.fillStyle = "#FF0000";
14+
ctx.fillRect(0, 0, 150, 75);
15+
16+
</script>
17+
18+
</body>
19+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<html>
2+
<head>
3+
<style type="text/css">
4+
body {
5+
font-size: 70%;
6+
font-family: verdana, helvetica, arial, sans-serif;
7+
}
8+
</style>
9+
<script>
10+
function cnvs_getCoordinates(e) {
11+
x = e.clientX;
12+
y = e.clientY;
13+
document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
14+
}
15+
16+
function cnvs_clearCoordinates() {
17+
document.getElementById("xycoordinates").innerHTML = "";
18+
}
19+
</script>
20+
<body style="margin:0px;">
21+
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"
22+
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
23+
<br>
24+
<br>
25+
<br>
26+
<div id="xycoordinates"></div>
27+
</body>
28+
</html>
Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
<meta charset="UTF-8">
55
<title></title>
66
<script>
7-
function draw(id){
7+
function draw(id) {
88
var canvas = document.getElementById(id);
9-
if(canvas == null){
9+
if (canvas == null) {
1010
return false;
1111
}
1212
var context = canvas.getContext("2d");
1313
context.fillStyle = "#eeeeef";
14-
context.fillRect(0,0,600,700);
15-
for(var i =0; i<=10; i++){
14+
context.fillRect(0, 0, 600, 700);
15+
for (var i = 0; i <= 10; i++) {
1616
context.beginPath();
17-
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
17+
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
1818
context.closePath();
1919
context.fillStyle = "rgba(255,0,0,0.25)";
2020
context.fill();
@@ -23,6 +23,6 @@
2323
</script>
2424
</head>
2525
<body onload="draw('canvas')">
26-
<canvas id="canvas" width="300" height="400"> </canvas>
26+
<canvas id="canvas" width="300" height="400"></canvas>
2727
</body>
28-
</html>
28+
</html>
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
5+
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
6+
您的浏览器不支持 HTML5 canvas 标签。
7+
</canvas>
8+
9+
<script>
10+
11+
var c = document.getElementById("myCanvas");
12+
var ctx = c.getContext("2d");
13+
ctx.beginPath();
14+
ctx.moveTo(20, 20);
15+
ctx.quadraticCurveTo(20, 100, 200, 20);
16+
ctx.stroke();
17+
18+
</script>
19+
20+
21+
</body>
22+
</html>
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
5+
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
6+
您的浏览器不支持 HTML5 canvas 标签。
7+
</canvas>
8+
9+
<script>
10+
11+
var c = document.getElementById("myCanvas");
12+
var ctx = c.getContext("2d");
13+
ctx.beginPath();
14+
ctx.moveTo(20, 20);
15+
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
16+
ctx.stroke();
17+
18+
</script>
19+
20+
21+
</body>
22+
</html>
Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,27 @@
44
<meta charset="UTF-8">
55
<title></title>
66
<script>
7-
function draw(id){
7+
function draw(id) {
88
var canvas = document.getElementById(id);
9-
if(canvas == null){
9+
if (canvas == null) {
1010
return false;
1111
}
1212
var context = canvas.getContext("2d");
1313
context.fillStyle = "#eeeeef";
14-
context.fillRect(0,0,300,400);
14+
context.fillRect(0, 0, 300, 400);
1515
var dx = 150;
1616
var dy = 150;
17-
var s =100;
17+
var s = 100;
1818
context.beginPath();
1919
context.fillStyle = "rgb(100,255,100)";
2020
var x = Math.sin(0);
2121
var y = Math.cos(0);
22-
var dig = Math.PI/15*11;
23-
context.moveTo(dx,dy);
24-
for(var i=0; i<30; i++){
25-
var x = Math.sin(i*dig);
26-
var y = Math.cos(i*dig);
27-
context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
22+
var dig = Math.PI / 15 * 11;
23+
context.moveTo(dx, dy);
24+
for (var i = 0; i < 30; i++) {
25+
var x = Math.sin(i * dig);
26+
var y = Math.cos(i * dig);
27+
context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
2828
}
2929
context.closePath();
3030
context.fill();
@@ -33,6 +33,6 @@
3333
</script>
3434
</head>
3535
<body onload="draw('canvas')">
36-
<canvas id="canvas" width="300" height="400"> </canvas>
36+
<canvas id="canvas" width="300" height="400"></canvas>
3737
</body>
38-
</html>
38+
</html>
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<html>
2+
<body>
3+
4+
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
5+
您的浏览器不支持 HTML5 canvas 标签。
6+
</canvas>
7+
8+
<script>
9+
10+
var c = document.getElementById("myCanvas");
11+
var ctx = c.getContext("2d");
12+
var grd = ctx.createLinearGradient(0, 0, 170, 0);
13+
grd.addColorStop(0, "black");
14+
grd.addColorStop(0.5, "red");
15+
grd.addColorStop(1, "white");
16+
ctx.fillStyle = grd;
17+
ctx.fillRect(20, 20, 150, 100);
18+
19+
</script>
20+
21+
</body>
22+
</html>
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<html>
2+
<body>
3+
4+
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
5+
您的浏览器不支持 HTML5 canvas 标签。
6+
</canvas>
7+
8+
<script>
9+
var c = document.getElementById("myCanvas");
10+
var ctx = c.getContext("2d");
11+
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
12+
grd.addColorStop(0, "red");
13+
grd.addColorStop(1, "white");
14+
ctx.fillStyle = grd;
15+
ctx.fillRect(10, 10, 150, 100);
16+
</script>
17+
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)