- Canvas Cookbook
- Bhushan Purushottam Joshi
- 115字
- 2021-07-16 11:03:14
Drawing a rainbow
This is an implementation of a quadratic curve.
The output of our new recipe looks like this:
How to do it...
The recipe is quite simple, comprising seven calls to the function quadraticTo() to draw seven different curves.
Here is the recipe:
<html>
<head>
<title>Rainbow</title>
<script type="text/javascript">
var can;
var ctx;
function init() {
can = document.getElementById("MyCanvasArea");
ctx = can.getContext("2d");
y=can.height/2;
x=can.width-20;
mid=can.width/2;
//rainbow - vibgyor
drawQuadraticCurve(20,y,mid,0,x,y,"violet",7);
drawQuadraticCurve(20,y-10,mid,-10,x,y-10,"indigo",7);
drawQuadraticCurve(20,y-20,mid,-20,x,y-20,"blue",7);
drawQuadraticCurve(20,y-30,mid,-30,x,y-30,"green",7);
drawQuadraticCurve(20,y-40,mid,-40,x,y-40,"yellow",7);
drawQuadraticCurve(20,y-50,mid,-50,x,y-50,"orange",7);
drawQuadraticCurve(20,y-60,mid,-60,x,y-60,"red",7);
}
function drawQuadraticCurve(xStart,yStart,xControl, yControl, xEnd, yEnd,color,width)
{
//refer the previous recipe for code
//....
}
</script>
</head>
<body onload="init()">
<canvas id="MyCanvasArea" width="800" height="400" style="border:2px solid black;" >
browser doesn't support canvas
</canvas>
</body>
</html>
How it works...
The drawQuadraticCurveTo() is the same function as used in the previous recipe. This function is called multiple times from the init() method.