0604

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
parent: 0f885b830ac552bfd357dec74c70e1349434b58b (diff)
9 files changed, 438 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>
diff --git a/web/learn_canvas/basics/index.html b/web/learn_canvas/basics/index.html
new file mode 100644
index 0000000..3c0cfb8
--- /dev/null
+++ b/web/learn_canvas/basics/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+</body>
+<script src="main.js"></script>
+</html>
+\ No newline at end of file
diff --git a/web/learn_canvas/basics/main.js b/web/learn_canvas/basics/main.js
new file mode 100644
index 0000000..5aa6458
--- /dev/null
+++ b/web/learn_canvas/basics/main.js
@@ -0,0 +1,60 @@
+let canvas = document.getElementById("canvas");
+let ctx = canvas.getContext("2d");
+
+var win_height = window.innerHeight;
+var win_width = window.innerWidth;
+
+canvas.height = win_height;
+canvas.width = win_width;
+console.log(canvas.width, canvas.height);
+
+canvas.style.background = "#bbf";
+
+
+class Circle {
+    constructor(context, xpos, ypos, radius, color) {
+        this.context = context;
+        this.xpos = xpos;
+        this.ypos = ypos;
+        this.radius = radius;
+        this.color = color;
+    }
+    draw() {
+        this.context.beginPath();
+        this.context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI*2, this.color);
+        this.context.strokeStyle = "grey";
+        this.context.lineWidth = 15;
+        this.context.fillStyle = this.color;
+        this.context.fill();
+        this.context.stroke();
+        this.context.closePath();
+    }
+    clickCircle(xmouse, ymouse) {
+        const distance = Math.sqrt((xmouse - this.xpos) * (xmouse - this.xpos) + (ymouse - this.ypos) * (ymouse - this.ypos));
+        if (distance <= this.radius) {
+            return true;
+        }
+        return false;
+    }
+    changeColor (newColor) {
+        this.color = newColor;
+        this.draw();
+    }
+}
+
+
+let circle = new Circle(ctx, 200, 200, 100, "blue");
+circle.draw(ctx);
+canvas.addEventListener("click", (event) => {
+//    console.log(event);
+//    console.log("clicked canvas");
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    if (circle.clickCircle(x, y)) {
+        circle.changeColor("red");
+    } else {
+        circle.changeColor("blue");
+    }
+//    console.log(rect);
+});
diff --git a/web/learn_canvas/canvas_btns/example.js b/web/learn_canvas/canvas_btns/example.js
new file mode 100644
index 0000000..0722613
--- /dev/null
+++ b/web/learn_canvas/canvas_btns/example.js
@@ -0,0 +1,121 @@
+var canvas = document.getElementById('canvas'),
+    context = canvas.getContext('2d'),
+    rubberbandDiv = document.getElementById('rubberbandDiv'),
+    resetButton = document.getElementById('resetButton'),
+    image = new Image(),
+    mousedown = {},
+    rubberbandRectangle = {},
+    dragging = false;
+
+// Functions..........................................................
+
+function rubberbandStart(x, y) {
+   mousedown.x = x;
+   mousedown.y = y;
+
+   rubberbandRectangle.left = mousedown.x;
+   rubberbandRectangle.top = mousedown.y;
+
+   moveRubberbandDiv();
+   showRubberbandDiv();
+
+   dragging = true;
+}
+
+function rubberbandStretch(x, y) {
+   rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
+   rubberbandRectangle.top  = y < mousedown.y ? y : mousedown.y;
+
+   rubberbandRectangle.width  = Math.abs(x - mousedown.x),
+   rubberbandRectangle.height = Math.abs(y - mousedown.y);
+
+   moveRubberbandDiv();
+   resizeRubberbandDiv();
+}
+
+function rubberbandEnd() {
+   var bbox = canvas.getBoundingClientRect();
+
+   try {
+     context.drawImage(canvas,
+                       rubberbandRectangle.left - bbox.left,
+                       rubberbandRectangle.top - bbox.top,
+                       rubberbandRectangle.width,
+                       rubberbandRectangle.height,
+                       0, 0, canvas.width, canvas.height);
+   }
+   catch (e) {
+      // Suppress error message when mouse is released
+      // outside the canvas
+   }
+
+   resetRubberbandRectangle();
+
+   rubberbandDiv.style.width = 0;
+   rubberbandDiv.style.height = 0;
+
+   hideRubberbandDiv();
+
+   dragging = false;
+}
+
+function moveRubberbandDiv() {
+   rubberbandDiv.style.top  = rubberbandRectangle.top  + 'px';
+   rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
+}
+
+function resizeRubberbandDiv() {
+   rubberbandDiv.style.width  = rubberbandRectangle.width  + 'px';
+   rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
+}
+
+function showRubberbandDiv() {
+   rubberbandDiv.style.display = 'inline';
+}
+
+function hideRubberbandDiv() {
+   rubberbandDiv.style.display = 'none';
+}
+
+function resetRubberbandRectangle() {
+   rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 };
+}
+
+// Event handlers.....................................................
+
+canvas.onmousedown = function (e) {
+   var x = e.clientX,
+       y = e.clientY;
+
+   e.preventDefault();
+   rubberbandStart(x, y);
+};
+
+window.onmousemove = function (e) {
+   var x = e.clientX,
+       y = e.clientY;
+
+    e.preventDefault();
+    if (dragging) {
+       rubberbandStretch(x, y);
+    }
+};
+
+window.onmouseup = function (e) {
+   e.preventDefault();
+   rubberbandEnd();
+};
+
+image.onload = function () {
+   context.drawImage(image, 0, 0, canvas.width, canvas.height);
+};
+
+resetButton.onclick = function(e) {
+   context.clearRect(0, 0, context.canvas.width,
+                           context.canvas.height);
+   context.drawImage(image, 0, 0, canvas.width, canvas.height);
+};
+
+// Initialization.....................................................
+
+image.src = 'curved-road.png';
+\ No newline at end of file
diff --git a/web/learn_canvas/canvas_btns/index.html b/web/learn_canvas/canvas_btns/index.html
new file mode 100644
index 0000000..9509727
--- /dev/null
+++ b/web/learn_canvas/canvas_btns/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+    #container
+    {
+      height: 400px;
+      position: relative;
+      width: 400px;
+    }
+    <!--#viewport-->
+    <!--{-->
+      <!--height: 100%;-->
+      <!--width: 100%;-->
+    <!--}-->
+    #controls
+    {
+      top: 0;
+      left: 0;
+      position: absolute;
+      width: 100%;
+    }
+    </style>
+</head>
+<body>
+
+<!--<div id="container">-->
+  <!--<canvas id="viewport">-->
+  <!--</canvas>-->
+  <!--<menu id="controls">-->
+       <!--<button onclick="copy()">belief</button>-->
+       <!--<button onclick="cut()">intents</button>-->
+  <!--</menu>-->
+<!--</div>-->
+<canvas id="viewport" style="z-index:1"></canvas>
+<input type="button" style="z-index:2; position:absolute; top:100; left:100" value="test"/>
+
+</body>
+<script src="main.js"></script>
+
+</html>
+\ No newline at end of file
diff --git a/web/learn_canvas/canvas_btns/main.js b/web/learn_canvas/canvas_btns/main.js
new file mode 100644
index 0000000..be07ddb
--- /dev/null
+++ b/web/learn_canvas/canvas_btns/main.js
@@ -0,0 +1,11 @@
+let canvas = document.getElementById("viewport");
+let ctx = canvas.getContext("2d");
+
+//var win_height = 600;
+//var win_width = 800;
+
+canvas.height = 600;
+canvas.width = 800;
+console.log(canvas.width, canvas.height);
+
+canvas.style.background = "#bbf";
+\ No newline at end of file
diff --git a/web/learn_canvas/canvas_btns/style.css b/web/learn_canvas/canvas_btns/style.css
new file mode 100644
index 0000000..c9b2bbf
--- /dev/null
+++ b/web/learn_canvas/canvas_btns/style.css
@@ -0,0 +1,18 @@
+#container
+{
+  height: 400px;
+  position: relative;
+  width: 400px;
+}
+#viewport
+{
+  height: 100%;
+  width: 100%;
+}
+#controls
+{
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+\ No newline at end of file
diff --git a/web/learn_canvas/canvas_btns/test.html b/web/learn_canvas/canvas_btns/test.html
new file mode 100644
index 0000000..9de2318
--- /dev/null
+++ b/web/learn_canvas/canvas_btns/test.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+   <head>
+      <title>Bouncing Balls</title>
+
+      <style>
+         body {
+            background: #dddddd;
+         }
+
+         #canvas {
+            margin-left: 10px;
+            margin-top: 10px;
+            background: #ffffff;
+            border: thin solid #aaaaaa;
+         }
+
+         #glasspane {
+            position: absolute;
+            left: 50px;
+            top: 50px;
+            padding: 0px 20px 10px 10px;
+            background: rgba(0, 0, 0, 0.3);
+            border: thin solid rgba(0, 0, 0, 0.6);
+            color:# #eeeeee;
+            font-family: Droid Sans, Arial, Helvetica, sans-serif;
+            font-size: 12px;
+            cursor: pointer;
+            -webkit-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
+            -moz-box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
+            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
+         }
+
+         #glasspane h2 {
+            font-weight: normal;
+         }
+
+         #glasspane .title {
+            font-size: 2em;
+            color:# rgba(255, 255, 0, 0.8);
+         }
+
+         #glasspane a:hover {
+            color:# yellow;
+         }
+
+         #glasspane a {
+            text-decoration: none;
+            color:# #cccccc;
+            font-size: 3.5em;
+         }
+
+         #glasspane p {
+            margin: 10px;
+            color:# rgba(65, 65, 220, 1.0);
+            font-size: 12pt;
+            font-family: Palatino, Arial, Helvetica, sans-serif;
+         }
+      </style>
+   </head>
+
+   <body>
+      <div id='glasspane'>
+         <h2 class='title'>Bouncing Balls</h2>
+
+         <p>One hundred balls bouncing</p>
+
+         <a id='startButton'>Start</a>
+      </div>
+
+      <canvas id='canvas' width='750' height='500'>
+         Canvas not supported
+      </canvas>
+
+      <script src='example.js'></script>
+  </body>
+</html>
diff --git a/web/learn_canvas/canvas_btns/test2.html b/web/learn_canvas/canvas_btns/test2.html
new file mode 100644
index 0000000..b456738
--- /dev/null
+++ b/web/learn_canvas/canvas_btns/test2.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+   <head>
+     <title>Rubber bands with layered elements</title>
+
+      <style>
+         body {
+             background: rgba(100, 145, 250, 0.3);
+         }
+
+         #canvas {
+            margin-left: 20px;
+            margin-right: 0;
+            margin-bottom: 20px;
+            border: thin solid #aaaaaa;
+            cursor: crosshair;
+            padding: 0;
+         }
+
+         #controls {
+            margin: 20px 0px 20px 20px;
+         }
+
+         #rubberbandDiv {
+            position: absolute;
+            border: 3px solid blue;
+            cursor: crosshair;
+            display: none;
+         }
+
+      </style>
+   </head>
+
+  <body>
+      <div id='controls'>
+         <input type='button' id='resetButton' value='Reset'/>
+      </div>
+
+      <div id='rubberbandDiv'></div>
+
+      <canvas id='canvas' width='800' height='520'>
+         Canvas not supported
+      </canvas>
+
+     <script src='example.js'></script>
+  </body>
+</html>
+\ No newline at end of file
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
parent	0f885b830ac552bfd357dec74c70e1349434b58b (diff)