Skip to content

Commit 7b32477

Browse files
ccppjavaccppjava
committed
add experiment page 2 and 3 content
1 parent b371da0 commit 7b32477

3 files changed

Lines changed: 118 additions & 7 deletions

File tree

‎canvas-experiments-2.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!--
2+
http://devhammer.net/blog/exploring-html5-canvas-part-2---basic-shapes
3+
-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="utf-8" />
8+
<title>Canvas Experimental Page</title>
9+
<style type="text/css">
10+
html { background: transparent url('webx-bkg.png') repeat-x; margin: 0; padding: 0; }
11+
body { font-family: "Segoe UI", Tahoma, Helvetica, Arial, Sans-Serif; margin: 0; padding: 0; line-height: 150%; background: transparent url('webx-content-bkg.jpg') no-repeat center top; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; color: #434343; }
12+
13+
.container { width: 800px; margin: 0 auto 0 auto; padding: 40px 0 0 0; }
14+
</style>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<canvas id="myCanvas" width="500" height="500">
19+
<p>Canvas is not supported by your browser.</p>
20+
</canvas>
21+
</div>
22+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
23+
<script type="text/javascript">
24+
$(document).ready(function() {
25+
var canvas = $('#myCanvas').get(0);
26+
var context = canvas.getContext("2d");
27+
28+
function renderContent() {
29+
context.fillRect(0, 0, canvas.width, canvas.height);
30+
31+
context.fillStyle = "#FF0000";
32+
context.fillRect(5, 5, 200, 100);
33+
context.strokeStyle = "#00ff00";
34+
context.strokeRect(5, 5, 200, 100);
35+
36+
// draw a circle with context.arc
37+
context.lineWidth = 3;
38+
context.fillStyle = "#0000FF";
39+
context.strokeStyle = "#FF0000";
40+
context.beginPath();
41+
//context.arc(155, 155, 42, Math.PI, Math.PI * 2, false);
42+
context.arc(155, 155, 42, 0, Math.PI * 2, false);
43+
context.closePath();
44+
context.fill();
45+
context.stroke();
46+
}
47+
48+
renderContent();
49+
});
50+
</script>
51+
</body>
52+
</html>
53+

‎canvas-experiments-3.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!--
2+
http://devhammer.net/blog/exploring-html5-canvas-part-3---paths-and-text
3+
-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta charset="utf-8" />
8+
<title>Canvas Experimental Page</title>
9+
<style type="text/css">
10+
html { background: transparent url('webx-bkg.png') repeat-x; margin: 0; padding: 0; }
11+
body { font-family: "Segoe UI", Tahoma, Helvetica, Arial, Sans-Serif; margin: 0; padding: 0; line-height: 150%; background: transparent url('webx-content-bkg.jpg') no-repeat center top; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; color: #434343; }
12+
13+
.container { width: 800px; margin: 0 auto 0 auto; padding: 40px 0 0 0; }
14+
</style>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<canvas id="myCanvas" width="500" height="500">
19+
<p>Canvas is not supported by your browser.</p>
20+
</canvas>
21+
</div>
22+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
23+
<script type="text/javascript">
24+
$(document).ready(function() {
25+
var canvas = $('#myCanvas').get(0);
26+
var context = canvas.getContext("2d");
27+
28+
function renderContent() {
29+
context.fillRect(0, 0, canvas.width, canvas.height);
30+
31+
context.moveTo(200, 200);
32+
context.lineTo(300, 300);
33+
context.stroke();
34+
}
35+
36+
renderContent();
37+
});
38+
</script>
39+
</body>
40+
</html>
41+

‎canvas-experiments.html‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!--
2-
http://devhammer.net/blog/exploring-html5-canvas-part-1---introduction
2+
http://devhammer.net/blog/exploring-html5-canvas-part-3---paths-and-text
33
-->
44
<!DOCTYPE html>
55
<html>
@@ -27,13 +27,30 @@
2727

2828
function renderContent() {
2929
context.fillRect(0, 0, canvas.width, canvas.height);
30+
31+
context.strokeStyle = "#FF0000"
32+
context.lineWidth = 7;
33+
context.lineCap = "round";
34+
context.lineJoin = "round";
3035

31-
var text = "Hello, Canvas!";
32-
context.fillStyle = "#FF0000";
33-
context.strokeStyle = "#0000FF";
34-
context.font = "36px sans-serif";
35-
context.strokeText(text, 10, 50);
36-
//context.fillText(text, 10, 50);
36+
// draw rectangle using line
37+
context.moveTo(200, 200);
38+
//context.lineTo(300, 300);
39+
//
40+
// The only difference between
41+
// bezierCurveTo and quadraticCurveTo is that
42+
// the latter only has one control point, rather than two.
43+
context.bezierCurveTo(200,200, 300,200, 300,300);
44+
context.lineTo(300, 200);
45+
context.lineTo(200, 200);
46+
context.stroke();
47+
context.fillStyle = "#00FF00";
48+
context.fill();
49+
50+
context.lineWidth = 2;
51+
context.strokeStyle = "#00F0FF";
52+
context.font = "14px sans-serif";
53+
context.strokeText("Hello, Canvas!", 200, 300);
3754
}
3855

3956
renderContent();

0 commit comments

Comments
 (0)