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
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!--
/**
* o------------------------------------------------------------------------------o
* | This file is part of the RGraph package - you can learn more at: |
* | |
* | http://www.rgraph.net |
* | |
* | This package is licensed under the RGraph license. For all kinds of business |
* | purposes there is a small one-time licensing fee to pay and for non |
* | commercial purposes it is free to use. You can read the full license here: |
* | |
* | http://www.rgraph.net/LICENSE.txt |
* o------------------------------------------------------------------------------o
*/
-->
<title>RGraph: Javascript charts & HTML5 canvas charts library - Animated rotating text with the RGraph software</title>
<link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
<link rel="icon" type="image/png" href="../images/favicon.png">
<script src="../libraries/RGraph.common.core.js" ></script>
<script>
__pause = false; // Provide a way to pause the rotation
__RGraph_rotate = 0; // A record of the angle (IN DEGREES) we're at currently
__RGraph_rotate2 = 0; // Ditto, but this is controlled by the buttons
window.onload = function ()
{
if (!__pause) {
var canvas = document.getElementById("myc");
var context = canvas.getContext('2d');
RGraph.Clear(canvas); // Clears the canvas
context.beginPath();
context.fillStyle = 'black';
RGraph.Text(context, 'Verdana',10,canvas.width/2,canvas.height/2,'Magic text! (' + __RGraph_rotate + ')','center','center',false, ++__RGraph_rotate);
RGraph.Text(context, 'Verdana', 16, 50, 50, 'This is making me dizzy... (' + (__RGraph_rotate * 5) + ')', 'center', 'left', false, __RGraph_rotate * 2);
RGraph.Text(context, 'Verdana', 20, 50, 200, 'Some user controllable text (' + __RGraph_rotate2 + ')', 'center', 'center', false, __RGraph_rotate2);
context.stroke();
context.fill();
}
setTimeout(window.onload, 1);
}
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-54706-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="breadcrumb">
<a href="../index.html">RGraph: Javascript charts & HTML5 canvas charts library</a>
>
<a href="./index.html">Examples</a>
>
Rotating text
</div>
<h1>RGraph: Javascript charts & HTML5 canvas charts - A text function that does horizontal and vertical alignment (and spins)</h1>
<table border="0" style="float: left; margin-right: 10px">
<tr>
<td colspan="2"><canvas id="myc" width="300" height="300" style="border: 1px dashed gray">The fallback HTML</canvas></td>
</tr>
<tr>
<td align="center">
<button style="width: 100px; margin: 5px" onclick="__RGraph_rotate2 -= 5">« Rotate left</button>
<button style="margin: 5px" onclick="if (this.innerHTML == 'Pause') {__pause = true; this.innerHTML = 'Play'} else {this.innerHTML = 'Pause'; __pause = false; }">Pause</button>
<button style="width: 100px; margin: 5px" onclick="__RGraph_rotate2 += 5">Rotate right»</button>
</td>
</tr>
</table>
<p>
RGraph.Text() is a text drawing function that allows vertical and horizontal alignment, and allows you to specify the angle of the
text too. The animation is done by a simple gobal variable, setTimeout() and redrawing the entire
canvas every frame. Perhaps not the most efficient of methods, but remember that your Javascript will likely be
running on computers that have more processing power than
some small countries... <a href="javascript: location.href = location.href">Reset the page</a>
</p>
<p>
In a similar vein you could easily make some text that bounces from one side of the screen to the other,
hurrah - the return of <marquee>!
</p>
<div>
More examples can be found on the individual <a href="/examples/index.html">example pages</a>, and a more complete
reference to the Text() function can be found in the <a href="../docs/api.html#functions.other">API docs</a>.
</div>
</body>
</html><!-- Social networking buttons -->
<div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px">
<!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> -->
<a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
</div>
<script>
// Opera fix
if (navigator.userAgent.indexOf('Opera') == -1) {
document.getElementById("social_icons").style.position = 'fixed';
}
</script>
<div id="google_plusone">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="http://www.rgraph.net"></g:plusone>
</div>
|
