91 lines
3.7 KiB
HTML
91 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<title>Animated rotating text with the OfficeExcel 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/OfficeExcel.common.core.js" ></script>
|
|
|
|
<script>
|
|
__pause = false; // Provide a way to pause the rotation
|
|
__OfficeExcel_rotate = 0; // A record of the angle (IN DEGREES) we're at currently
|
|
__OfficeExcel_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');
|
|
|
|
OfficeExcel.Clear(canvas); // Clears the canvas
|
|
|
|
context.beginPath();
|
|
context.fillStyle = 'black';
|
|
|
|
OfficeExcel.Text(context, 'Verdana',10,canvas.width/2,canvas.height/2,'Magic text! (' + __OfficeExcel_rotate + ')','center','center',false, ++__OfficeExcel_rotate);
|
|
OfficeExcel.Text(context, 'Verdana', 16, 50, 50, 'This is making me dizzy... (' + (__OfficeExcel_rotate * 5) + ')', 'center', 'left', false, __OfficeExcel_rotate * 2);
|
|
OfficeExcel.Text(context, 'Verdana', 20, 50, 200, 'Some user controllable text (' + __OfficeExcel_rotate2 + ')', 'center', 'center', false, __OfficeExcel_rotate2);
|
|
|
|
context.stroke();
|
|
context.fill();
|
|
}
|
|
|
|
setTimeout(window.onload, 1);
|
|
}
|
|
</script>
|
|
|
|
<?php PrintAnalyticsCode() ?>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="breadcrumb">
|
|
<a href="../index.html">OfficeExcel: Javascript charts & HTML5 canvas charts library</a>
|
|
>
|
|
<a href="./index.html">Examples</a>
|
|
>
|
|
Rotating text
|
|
</div>
|
|
|
|
<h1>A text <span>function that does horizontal and vertical alignment (and spins)</span></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" onmousedown="__OfficeExcel_rotate2 -= 5">« Rotate left</button>
|
|
<button style="margin: 5px" onmousedown="if (this.innerHTML == 'Pause') {__pause = true; this.innerHTML = 'Play'} else {this.innerHTML = 'Pause'; __pause = false; }">Pause</button>
|
|
<button style="width: 100px; margin: 5px" onmousedown="__OfficeExcel_rotate2 += 5">Rotate right»</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>
|
|
OfficeExcel.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/">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>
|
|
|