From 44097da7288042e988bcb89f1c6cc817a8e1eec9 Mon Sep 17 00:00:00 2001
From: zhang <zch921005@126.com>
Date: Sat, 4 Jun 2022 08:48:54 +0800
Subject: 0604

---
 web/learn_canvas/canvas_btns/example.js | 121 ++++++++++++++++++++++++++++++++
 web/learn_canvas/canvas_btns/index.html |  43 ++++++++++++
 web/learn_canvas/canvas_btns/main.js    |  11 +++
 web/learn_canvas/canvas_btns/style.css  |  18 +++++
 web/learn_canvas/canvas_btns/test.html  |  77 ++++++++++++++++++++
 web/learn_canvas/canvas_btns/test2.html |  47 +++++++++++++
 6 files changed, 317 insertions(+)
 create mode 100644 web/learn_canvas/canvas_btns/example.js
 create mode 100644 web/learn_canvas/canvas_btns/index.html
 create mode 100644 web/learn_canvas/canvas_btns/main.js
 create mode 100644 web/learn_canvas/canvas_btns/style.css
 create mode 100644 web/learn_canvas/canvas_btns/test.html
 create mode 100644 web/learn_canvas/canvas_btns/test2.html

(limited to 'web/learn_canvas/canvas_btns')

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
-- 
cgit v1.2.3