RobinNixon
45 lines
1.2 KiB
HTML
45 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Quadratic Curves</title>
|
|
<script src='OSC.js'></script>
|
|
</head>
|
|
<body>
|
|
<canvas id='mycanvas' width='480' height='240'></canvas>
|
|
|
|
<script>
|
|
canvas = O('mycanvas')
|
|
context = canvas.getContext('2d')
|
|
S(canvas).background = 'lightblue'
|
|
|
|
context.beginPath()
|
|
context.moveTo(180, 60)
|
|
context.quadraticCurveTo(240, 0, 300, 60)
|
|
context.quadraticCurveTo(460, 30, 420, 100)
|
|
context.quadraticCurveTo(480, 210, 340, 170)
|
|
context.quadraticCurveTo(240, 240, 200, 170)
|
|
context.quadraticCurveTo(100, 200, 140, 130)
|
|
context.quadraticCurveTo( 40, 40, 180, 60)
|
|
context.fillStyle = 'white'
|
|
context.fill()
|
|
context.closePath()
|
|
|
|
// Illustrate the attractor points
|
|
// IE, Chrome, Opera only
|
|
|
|
// context.beginPath()
|
|
// context.moveTo(240, 0)
|
|
// context.lineTo(460, 30)
|
|
// context.lineTo(480, 210)
|
|
// context.lineTo(240, 240)
|
|
// context.lineTo(100, 200)
|
|
// context.lineTo( 40, 40)
|
|
// context.closePath()
|
|
// context.setLineDash([2,3])
|
|
// context.strokeStyle = 'green'
|
|
// context.stroke()
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|