crunchy-rocks/draw2d
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

html5 canvas tests

Browse source
This commit is contained in:
legoff.laurent 2010-11-26 15:09:12 +00:00
parent 46ba11fa02
commit 30e5a2c42c
2 changed files with 100 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
draw2d/src/cmd/ps_tests/Tests.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
<title>Canvas tutorial</title>
<script type="text/javascript" src="test.js">
</script>
</head>
<body onload="executeTests()">
<canvas id="TestStar" width="400" height="400"></canvas>
<canvas id="TestTransform" width="400" height="400"></canvas>
</body>
</html>

84
draw2d/src/cmd/ps_tests/test.js Normal file
View file

@ -0,0 +1,84 @@
function toDegree(radians) {
return radians * 180 / Math.PI;
}
function toRadians(degree) {
return degree * Math.PI / 180;
}
function draw(test){
var canvas = document.getElementById(test.name);
if (canvas.getContext){
var gc = canvas.getContext('2d');
test(gc)
}
}
function executeTests() {
draw(TestStar)
draw(TestTransform)
}
function TestStar(gc) {
for(i = 0.0 ; i < 360; i = i + 10) {// Go from 0 to 360 degrees in 10 degree steps
gc.beginPath() // Start a new path
gc.save() // Keep rotations temporary
gc.translate(144, 144)
gc.rotate(i * (Math.PI / 180.0)) // Rotate by degrees on stack from 'for'
gc.moveTo(0, 0)
gc.lineTo(72, 0)
gc.stroke()
gc.restore() // Get back the unrotated state
}
}
function TestTransform(gc) {
gc.save()
gc.translate(40, 40) // Set origin to (40, 40)
gc.beginPath()
gc.moveTo(0,0)
gc.lineTo(72,0)
gc.lineTo(72, 72)
gc.lineTo(0, 72)
gc.closePath()
gc.stroke()
gc.restore()
gc.save()
gc.translate(100, 150) // Translate origin to (100, 150)
gc.rotate(30* (Math.PI / 180.0)) // Rotate counter-clockwise by 30 degrees
gc.beginPath()
gc.moveTo(0,0)
gc.lineTo(72,0)
gc.lineTo(72, 72)
gc.lineTo(0, 72)
gc.closePath() // Draw box...
gc.stroke()
gc.restore()
gc.save()
gc.translate(40, 300) // Translate to (40, 300)
gc.scale(0.5, 1) // Reduce x coord by 1/2, y coord left alone
gc.beginPath()
gc.moveTo(0,0)
gc.lineTo(72,0)
gc.lineTo(72, 72)
gc.lineTo(0, 72)
gc.closePath() // Draw box...
gc.stroke()
gc.restore()
gc.save()
gc.translate(300, 300) // Set origin to (300, 300)
gc.rotate(45* (Math.PI / 180.0)) // Rotate coordinates by 45 degrees
gc.scale(0.5, 1) // Scale coordinates
gc.beginPath()
gc.moveTo(0,0)
gc.lineTo(72,0)
gc.lineTo(72, 72)
gc.lineTo(0, 72)
gc.closePath() // Draw box
gc.stroke()
gc.restore()
}