RobinNixon
72 lines
1.6 KiB
HTML
72 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Drawing Arcs</title>
|
|
<script src='OSC.js'></script>
|
|
</head>
|
|
<body>
|
|
<canvas id='mycanvas' width='640' height='480'></canvas>
|
|
|
|
<script>
|
|
canvas = O('mycanvas')
|
|
context = canvas.getContext('2d')
|
|
S(canvas).background = 'lightblue'
|
|
context.lineWidth = 2
|
|
context.strokeStyle = 'blue'
|
|
|
|
Math.degreesToRadians = function(degrees)
|
|
{
|
|
return degrees * Math.PI / 180
|
|
}
|
|
|
|
// Following is the original example code
|
|
//
|
|
// arcs =
|
|
// [
|
|
// Math.PI,
|
|
// Math.PI * 2,
|
|
// Math.PI / 2,
|
|
// Math.PI / 180 * 59
|
|
// ]
|
|
//
|
|
// Below the code now uses degrees as arguments
|
|
|
|
arcs =
|
|
[
|
|
Math.degreesToRadians(180),
|
|
Math.degreesToRadians(360),
|
|
Math.degreesToRadians(90),
|
|
Math.degreesToRadians(59)
|
|
]
|
|
|
|
for (j = 0 ; j < 4 ; ++j)
|
|
{
|
|
context.beginPath()
|
|
context.arc(80 + j * 160, 80, 70, 0, arcs[j])
|
|
context.closePath()
|
|
context.stroke()
|
|
}
|
|
|
|
context.strokeStyle = 'red'
|
|
|
|
for (j = 0 ; j < 4 ; ++j)
|
|
{
|
|
context.beginPath()
|
|
context.arc(80 + j * 160, 240, 70, 0, arcs[j])
|
|
context.stroke()
|
|
context.closePath()
|
|
}
|
|
|
|
context.strokeStyle = 'green'
|
|
|
|
for (j = 0 ; j < 4 ; ++j)
|
|
{
|
|
context.beginPath()
|
|
context.arc(80 + j * 160, 400, 70, 0, arcs[j], true)
|
|
context.stroke()
|
|
context.closePath()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|