Точка, Линия, Круг. Без всяких канвасов и прочего.
Рисуем цветными дивами.
Большие картины этим не нарисуешь (сожрет много ресурсов), но поставить стрелочку или перечеркнуть часть страницы - реально.
В примере реализованы стрелочные часы.
| Код |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Hello Clock!</title>
<style TYPE="text/css">
html, body {
max-width: 100%;
max-height: 100%;
}
.num {
font-family: serif;
font-size: 24px;
color: Gold;
}
</style>
<script type="text/javascript">
var Graph = new function()
{
this.master = null;
this.color = 'Black';
this.size = 1;
this.preset = function( color, size )
{
this.color = color;
this.size = size;
}
this.container = function( master )
{
this.master = master;
}
this.pixel = function( x, y )
{
var el = document.createElement( 'DIV' );
el.style.position = 'absolute';
el.style.top = y + 'px';
el.style.left = x + 'px';
el.style.backgroundColor = this.color;
el.style.width = el.style.height = this.size + 'px';
el.style.fontSize = 0;
if( this.master == null )
this.master = document.body;
this.master.appendChild( el );
}
this.line = function( bx, by, ex, ey )
{
var dx = ( ex - bx >= 0 )? 1 : -1;
var dy = ( ey - by >= 0 )? 1 : -1;
var lengthX = Math.abs( ex - bx );
var lengthY = Math.abs( ey - by );
var length = Math.max( lengthX, lengthY );
var x = bx;
var y = by;
if( length == 0 )
this.pixel( x, y );
length++;
if( lengthY <= lengthX )
{
var d = -lengthX;
while( length-- )
{
this.pixel( x, y );
x += dx;
d += 2 * lengthY;
if( d > 0 )
{
d -= 2 * lengthX;
y += dy;
}
}
}
else
{
var d = -lengthY;
while( length-- )
{
this.pixel( x, y );
y += dy;
d += 2 * lengthX;
if( d > 0 )
{
d -= 2 * lengthY;
x += dx;
}
}
}
}
this.circle = function ( xc, yc, r )
{
var x = 0;
var y = r;
var d = 3 - 2 * r;
while( x <= y )
{
this.pixel( x + xc, y + yc );
this.pixel( x + xc, -y + yc );
this.pixel( -x + xc, -y + yc );
this.pixel( -x + xc, y + yc );
this.pixel( y + xc, x + yc );
this.pixel( y + xc, -x + yc );
this.pixel( -y + xc, -x + yc );
this.pixel( -y + xc, x + yc );
if( d < 0 )
d += 4 * x + 6;
else
{
d += 4 * ( x - y ) + 10;
y--;
}
x++;
}
}
this.text = function( x, y, str, className )
{
var el = document.createElement( 'DIV' );
el.style.position = 'absolute';
el.style.top = y + 'px';
el.style.left = x + 'px';
el.innerHTML = str;
el.className = className;
if( this.master == null )
this.master = document.body;
this.master.appendChild( el );
}
}
var Timer = new function()
{
this.hour = -1;
this.minute = -1;
this.sec = -1;
this.tid = null;
this.getTime = function()
{
var d = new Date();
var h = d.getHours();
if( h > 11 )
h -= 12;
return { h: h, m: d.getMinutes(), s: d.getSeconds()};
}
this.set = function( func )
{
this.tid = setTimeout( func, 100 );
}
}
</script>
</head>
<body>
<h2>Hello Clock!</h2>
<div style="width: 500px; height: 450px; background: Gray; position: relative; overflow: hidden;">
<div id="field"></div>
<div id="fieldHour"></div>
<div id="fieldMin"></div>
<div id="fieldSec"></div>
</div>
<script type="text/javascript">
var r = 150;
var cx = 200;
var cy = 200;
Graph.container( document.getElementById( 'field' ));
Graph.preset( 'gold', 2 );
Graph.circle( cx, cy, r );
Graph.text( 189, 20, '12', 'num' );
Graph.text( 360, 188, '3', 'num' );
Graph.text( 194, 355, '6', 'num' );
Graph.text( 30, 188, '9', 'num' );
var a6 = Math.PI/30;
var a30 = Math.PI/6;
for( var i = 0; i < 12; i++ )
Graph.line( cx + Math.round(( r - 5 ) * Math.sin( i * a30 )), cy - Math.round(( r - 5 ) * Math.cos( i * a30 )), cx + Math.round( r * Math.sin( i * a30 )), cy - Math.round( r * Math.cos( i * a30 )));
Graph.preset( 'Silver', 2 );
for( var i = 0; i < 60; i++ )
Graph.pixel( cx + Math.round(( r + 5 ) * Math.sin( i * a6 )), cy - Math.round(( r + 5 ) * Math.cos( i * a6 )));
Graph.preset( '#CCFFFF', 2 );
Graph.circle( cx, cy, 14 );
var drawSec = function()
{
var t = Timer.getTime();
if( t.h != Timer.hour )
{
Timer.hour = t.h;
var el = document.getElementById( 'fieldHour' );
el.innerHTML = '';
Graph.container( el );
Graph.preset( '#66CCFF', 5 );
Graph.line( cx, cy, cx + Math.round(( r - 70 ) * Math.sin( t.h * a30 )), cy - Math.round(( r - 70 ) * Math.cos( t.h * a30 )));
}
if( t.m != Timer.minute )
{
Timer.minute = t.m;
var el = document.getElementById( 'fieldMin' );
el.innerHTML = '';
Graph.container( el );
Graph.preset( '#CCFFFF', 3 );
Graph.line( cx + Math.round(( r - 135 ) * Math.sin( t.m * a6 )), cy - Math.round(( r - 135 ) * Math.cos( t.m * a6 )), cx + Math.round(( r - 40 ) * Math.sin( t.m * a6 )), cy - Math.round(( r - 40 ) * Math.cos( t.m * a6 )));
}
if( t.s != Timer.sec )
{
Timer.sec = t.s;
var el = document.getElementById( 'fieldSec' );
el.innerHTML = '';
Graph.container( el );
Graph.preset( 'White', 1 );
Graph.line( cx + Math.round(( r - 100 ) * Math.sin( t.s * a6 )), cy - Math.round(( r - 100 ) * Math.cos( t.s * a6 )), cx + Math.round(( r - 85 ) * Math.sin( t.s * a6 )), cy - Math.round(( r - 85 ) * Math.cos( t.s * a6 )));
Graph.circle( cx + Math.round(( r - 80 ) * Math.sin( t.s * a6 )), cy - Math.round(( r - 80 ) * Math.cos( t.s * a6 )), 5 );
Graph.line( cx + Math.round(( r - 75 ) * Math.sin( t.s * a6 )), cy - Math.round(( r - 75 ) * Math.cos( t.s * a6 )), cx + Math.round(( r - 10 ) * Math.sin( t.s * a6 )), cy - Math.round(( r - 10 ) * Math.cos( t.s * a6 )));
}
Timer.set( "drawSec()" );
}
drawSec();
</script>
</body>
</html>
|
|
