accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
265 lines (217 loc) • 8.69 kB
HTML
<html>
<!--
Copyright 2007 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>Graphics Basic Elements Demo Page</title>
<style>
.type { font-size:14px; font-weight:bold; font-family:arial; background-color:#f7f7f7; text-align:center }
</style>
<script type="text/javascript" src="../../base.js"></script>
<script type="text/javascript">
goog.require('goog.dom');
goog.require('goog.graphics');
goog.require('goog.graphics.Font');
</script>
<script type="text/javascript">
function drawElements() {
var graphics = goog.graphics.createSimpleGraphics(600, 200);
// Basic shapes
var fill = new goog.graphics.SolidFill('yellow');
var stroke = new goog.graphics.Stroke(2, 'green');
graphics.drawRect(30, 10, 100, 80, stroke, fill);
stroke = new goog.graphics.Stroke(4, 'green');
// Image shapes
graphics.drawImage(30, 110, 276, 110,
'http://www.google.com/intl/en_ALL/images/logo.gif');
graphics.drawCircle(190, 70, 50, stroke, fill);
stroke = new goog.graphics.Stroke(6, 'green');
graphics.drawEllipse(300, 140, 80, 40, stroke, fill);
// A path
var path = new goog.graphics.Path();
path.moveTo(320, 30);
path.lineTo(420, 130);
path.lineTo(480, 30);
path.close();
stroke = new goog.graphics.Stroke(1, 'green');
graphics.drawPath(path, stroke, fill);
// Clipped shapes
var redFill = new goog.graphics.SolidFill('red');
graphics.drawCircle(540, 10, 50, null, redFill);
graphics.drawCircle(540, 10, 30, null, fill);
graphics.drawCircle(560, 210, 30, stroke, fill);
graphics.drawCircle(560, 210, 45, stroke, null); // No fill
graphics.drawCircle(600, 90, 30, stroke, fill);
graphics.render(document.getElementById('shapes'));
// ---------------------------------------------------------------------
// Text elements
graphics = goog.graphics.createGraphics(600, 200);
fill = new goog.graphics.SolidFill('blue');
stroke = null;
var font = new goog.graphics.Font(30, 'Times');
graphics.drawText('Large Top Center', 0, 0, 600, 200, 'center', null,
font, stroke, fill);
font = new goog.graphics.Font(24, 'Times');
font.bold = true;
graphics.drawText('In Bold', 0, 30, 600, 200, 'center', null,
font, stroke, fill);
font.bold = false;
font.italic = true;
graphics.drawText('Italics', 0, 54, 600, 200, 'center', null,
font, stroke, fill);
font = new goog.graphics.Font(14, 'Arial');
graphics.drawText('Top-Left', 0, 0, 600, 200, 'left', null,
font, stroke, fill);
graphics.drawText('Top-right', 0, 0, 600, 200, 'right', null,
font, stroke, fill);
graphics.drawText('Bottom-right', 0, 0, 600, 200, 'right', 'bottom',
font, stroke, fill);
graphics.drawText('Right-Middle', 0, 0, 600, 200, 'right', 'center',
font, stroke, fill);
graphics.drawTextOnLine('Going down left', 130, 0, 130, 200, 'left',
font, stroke, fill);
graphics.drawTextOnLine('Going down center', 150, 0, 150, 200, 'center',
font, stroke, fill);
graphics.drawTextOnLine('Going down right', 170, 0, 170, 200, 'right',
font, stroke, fill);
graphics.drawTextOnLine('Going up left', 430, 200, 430, 0, 'left',
font, stroke, fill);
graphics.drawTextOnLine('Going up center', 450, 200, 450, 0, 'center',
font, stroke, fill);
graphics.drawTextOnLine('Going up right', 470, 200, 470, 0, 'right',
font, stroke, fill);
font = new goog.graphics.Font(18, 'Arial');
graphics.drawTextOnLine('Diagonal text', 200, 180, 400, 60, 'center',
font, stroke, fill);
graphics.render(document.getElementById('text'));
// ---------------------------------------------------------------------
// Path elements
graphics = goog.graphics.createSimpleGraphics(600, 200);
fill = new goog.graphics.SolidFill('yellow');
stroke = new goog.graphics.Stroke(1, 'black');
path = new goog.graphics.Path();
path.moveTo(80, 80);
path.arc(80, 80, 100, 100, 15, -300, true);
path.close();
graphics.drawPath(path, stroke, fill);
stroke = new goog.graphics.Stroke(3, 'black');
path = new goog.graphics.Path()
.moveTo(200, 180)
.lineTo(230, 100)
.lineTo(280, 30)
.lineTo(280, 80)
.lineTo(200, 90);
graphics.drawPath(path, stroke, null);
path = new goog.graphics.Path()
.moveTo(300, 150)
.curveTo(370, 0, 420, 200, 500, 150);
graphics.drawPath(path, stroke, null);
graphics.render(document.getElementById('paths'));
// ---------------------------------------------------------------------
// Colors
graphics = goog.graphics.createSimpleGraphics(600, 200);
fill = new goog.graphics.SolidFill('red');
stroke = new goog.graphics.Stroke(1, 'black');
graphics.drawRect(30, 10, 100, 80, stroke, fill);
fill = new goog.graphics.LinearGradient(200, 10, 400, 190,
'#000080', '#800000');
graphics.drawRect(200, 10, 200, 180, stroke, fill);
fill = new goog.graphics.LinearGradient(30, 110, 30, 200,
'#8080ff', '#000080');
graphics.drawRect(30, 110, 100, 80, stroke, fill);
fill = new goog.graphics.SolidFill('blue');
graphics.drawCircle(500, 60, 40, stroke, fill);
fill = new goog.graphics.SolidFill('red', 0.5);
graphics.drawCircle(500, 90, 40, stroke, fill);
fill = new goog.graphics.SolidFill('green', 0.2);
graphics.drawCircle(500, 120, 40, stroke, fill);
graphics.render(document.getElementById('colors'));
// ---------------------------------------------------------------------
// Coordinates
graphics = goog.graphics.createSimpleGraphics(1200, 300, 12000, 3000);
fill = new goog.graphics.SolidFill('yellow');
stroke = new goog.graphics.Stroke('3px', 'black');
path = new goog.graphics.Path();
path.moveTo(300, 300);
path.arc(300, 300, 1000, 1000, 15, 60, true);
path.close();
graphics.drawPath(path, stroke, fill);
stroke = new goog.graphics.Stroke(3, 'black');
path = graphics.createPath()
.moveTo(2000, 1800)
.lineTo(2300, 1000)
.lineTo(2800, 300)
.lineTo(2800, 800)
.lineTo(2000, 900);
graphics.drawPath(path, stroke, null);
path = new goog.graphics.Path()
.moveTo(3000, 1500)
.curveTo(3700, 0, 4200, 2000, 5000, 1500);
graphics.drawPath(path, stroke, null);
stroke = new goog.graphics.Stroke(20, 'green');
graphics.drawRect(5300, 100, 1000, 800, stroke, fill);
stroke = new goog.graphics.Stroke(4, 'green');
graphics.drawImage(5300, 1100, 2760, 1100,
'http://www.google.com/intl/en_ALL/images/logo.gif');
graphics.drawCircle(6900, 700, 500, stroke, fill);
stroke = new goog.graphics.Stroke(60, 'green');
graphics.drawEllipse(8000, 1400, 800, 400, stroke, fill);
font = new goog.graphics.Font(140, 'Arial');
fill = new goog.graphics.SolidFill('blue');
graphics.drawTextOnLine('Going up center', 11000, 2000, 11000, 0,
'center', font, null, fill);
graphics.render(document.getElementById('coords'));
}
</script>
</head>
<body onload="drawElements()">
<table border="1">
<tr valign="top">
<td class="type">
Text: fonts, alignment, vertical-alignment, direction
</td>
<td class="type">
Basic shapes: Rectangle, Circle, Ellipses, Path, Clip to canvas
</td>
</tr>
<tr>
<td>
<span id="text"></span>
</td>
<td>
<span id="shapes"></span>
</td>
</tr>
<tr valign="top">
<td class="type">
Paths: Lines, arcs, curves
</td>
<td class="type">
Colors: solid, gradients, transparency
</td>
</tr>
<tr>
<td>
<span id="paths"></span>
</td>
<td>
<span id="colors"></span>
</td>
</tr>
<tr>
<td colspan="2" class="type">
Coordinate scaling + stroke types
</td>
</tr>
<tr>
<td colspan="2" class="type">
<span id="coords"></span>
</td>
</tr>
</table>
</body>
</html>