- 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.
推薦閱讀
- Learning Cython Programming
- iOS開發實戰：從零基礎到App Store上架
- 機器人Python青少年編程開發實例
- C#程序設計教程
- Spring Boot企業級項目開發實戰
- Express Web Application Development
- Python全棧數據工程師養成攻略（視頻講解版）
- Geospatial Development By Example with Python
- Learning iOS Security
- ASP.NET 4.0 Web程序設計
- R的極客理想：量化投資篇
- Java程序設計及應用開發
- Mastering Python
- Scratch 3.0少兒積木式編程（6~10歲）
- Java編程動手學