Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

103 lines (92 sloc) 2.688 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DuCAD</title>
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
function menu(name)
{
var id = name + "_menu";
if ( $(id).style.display == 'none' ) {
$(id).style.display = 'block';
} else {
$(id).style.display = 'none';
}
}
function init()
{
menus = document.getElementsByTagName('menu');
for(i=0; i < menus.length; i++) {
if ( menus[i].getAttribute('id') != 'main_menu' )
menus[i].style.display = 'none';
}
var canvas = document.getElementById('drawing_area');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200, 0, 0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
function draw(){
var canvas = document.getElementById('drawing_area');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
/*
* For more information, see:
* https://developer.mozilla.org/en/Canvas_tutorial:Drawing_shapes
* Explanation of basic canvas functions:
* ctx.fillStyle = "rgb(r, g, b);
* ctx.fillRect (x, y, width, height);
* ctx.strokeRect (x, y, width, height);
* ctx.clearRect (x, y, width, height);
*
* ctx.beginPath();
* ctx.moveTo(x, y);
* ctx.lineTo(x, y); // From position specified in previous ctx.moveTo or previous ctx.lineTo
* ctx.fill(); // this OR ctx.stroke()
* ctx.stroke();
*
* arc(x, y, radius, startAngle, endAngle, anticlockwise)
* - angles are in radians
* - from degrees: var radians = (Math.PI/180)*degrees;
*
* Not entirely sure about these next 2
* quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)
* bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
*
* rect(x, y, width, height) // This does not actually DRAW it, it just adds the points to the path!
*/
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
window.onload = draw;
</script>
<style type="text/css">
canvas#main_canvas {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="wrap">
<canvas id="drawing_area"></canvas>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.