diff options
| author | zhang <zch921005@126.com> | 2022-06-04 08:48:54 +0800 |
|---|---|---|
| committer | zhang <zch921005@126.com> | 2022-06-04 08:48:54 +0800 |
| commit | 44097da7288042e988bcb89f1c6cc817a8e1eec9 (patch) | |
| tree | 7c28da29f31ca429b8d27ed7441d650f1195812d /web/learn_canvas/bar_canvas.html | |
| parent | 0f885b830ac552bfd357dec74c70e1349434b58b (diff) | |
0604
Diffstat (limited to 'web/learn_canvas/bar_canvas.html')
| -rw-r--r-- | web/learn_canvas/bar_canvas.html | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/web/learn_canvas/bar_canvas.html b/web/learn_canvas/bar_canvas.html new file mode 100644 index 0000000..c2d7518 --- /dev/null +++ b/web/learn_canvas/bar_canvas.html @@ -0,0 +1,50 @@ +<html> +<head> + +<script> + function draw() { + /* Accepting and seperating comma seperated values */ + var n = document.getElementById("num").value; + var values = n.split(','); + + var canvas = document.getElementById('myCanvas'); + var ctx = canvas.getContext('2d'); + + var width = 40; //bar width + var X = 50; // first bar position + var base = 200; + + for (var i =0; i<values.length; i++) { + ctx.fillStyle = '#008080'; + var h = values[i]; + ctx.fillRect(X,canvas.height - h,width,h); + + X += width+15; + /* text to display Bar number */ + ctx.fillStyle = '#4da6ff'; + ctx.fillText('Bar '+i,X-50,canvas.height - h -10); + } + /* Text to display scale */ + ctx.fillStyle = '#000000'; + ctx.fillText('Scale X : '+canvas.width+' Y : '+canvas.height,800,10); + + } + function reset(){ + var canvas = document.getElementById('myCanvas'); + var ctx = canvas.getContext('2d'); + ctx.clearRect(0, 0, canvas.width, canvas.height); + } +</script> +</head> +<body align="center"> + + + Enter the values seperated by a comma<br> + <input type="text" name="number" id="num"><br> + <input type="button" value="submit" name="submit" onclick="draw()"> + <input type="button" value="Clear" name="Clear" onclick="reset()"><br><br> + <canvas id="myCanvas" width="900" height="500" style="border:1px solid #c3c3c3;"> + </canvas> + +</body> +</html> |